Jquery上传文件代码案例教程

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title>上传文件</title>     <link rel="stylesheet" type="text/css" href="/Scripts/jquery.uploadify-v2.1.0/uploadify.css" />     <script src="../Scripts/jquery.min.js"></script>     <script type="text/javascript" src="/Scripts/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>     <script type="text/javascript" src="/Scripts/jquery.uploadify-v2.1.0/swfobject.js"></script>     <script type="text/javascript" src="/Scripts/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>     <script type="text/javascript">         $(document).ready(function () {             $("#UploadFile").uploadify({                 'uploader': '/Scripts/jquery.uploadify-v2.1.0/uploadify.swf',                 'script': 'Ashx/Upload.ashx',                 'auto': false,//设置false通过按钮点击上传,true是选择文化后自动上传                 'multi': false, //是否允许同时上传多个文件                 'queueID': 'hideDiv',//我这里不需要上传进度条,所以隐藏掉                 'width': 55, //指定uploadify.swf按钮文件的宽度                 'height':30,                 'buttonText': "浏览",                 'buttonImg': '/images/liulan_btn.png',                 'fileExt': '*.png;*.jpg;*.jpeg;*.doc;*.docx;*.ppt;*.pptx;*.xls;*.xlsx;*.bmp;', //指定文件对话框只能选择的文件格式                 'fileDesc': "请选择文件",                 'sizeLimit': 3*1024*1024,//"上传文件大小控制"                 'method': 'post',                 //选择文件时触发                 'onSelect': function (e, data, fileObj) {                     $("#textfield").val(fileObj.name)                 },                 //一个文件上传完成后触发                 'onComplete': function (e, queueId, fileObj, response, data) {                     var dataSource = eval("(" + response + ")");//response是后台传回的数据,如果是json格式需要eval解析                     if (dataSource) {                         if (dataSource == "success") {                             alert("上传成功");                         }                          }                     }                 }             });             $("#upfile").click(function () {                 //自定义传递参数                 $('#UploadFile').uploadifySettings('scriptData', { 'type':'UploadFile','receiveId': Request("receiveId"), 'groupType': Request("groupType") });                 $('#UploadFile').uploadifyUpload();             });         });     </script> </head> <body>     <form id="form1" runat="server">     <div style="width:380px;height:121px;margin:0 auto;border:#7897b3 solid 1px;">             <div style="width:360px;height:26px;margin:12px 0px 2px 10px;position:relative;">                  <div style="height:26px;float:left;width:286px;">                      <span style="float:left;background:#fff;border-top:#7897b3 solid 1px;border-bottom:#7897b3 solid 1px;width:276px;height:24px">             <input type="text" name="textfield" readonly="readonly" id="textfield" style="height:22px;width:275px;line-height:24px;" />                        </span>                 </div>                  <asp:FileUpload ID="UploadFile" runat="server" style="position: absolute;left: 0; height: 24px;width: 360px; filter: alpha(opacity:0); opacity: 0;cursor: pointer;" />             </div>                 <div id="d1" style="margin-left:10px; width:360px; line-height:12px; color:#999;"></div>                 <div style="width:360px;margin-left:165px">                     <input type="button" style="color:white;" class="liulan_c" id="upfile" value="确认" />                 </div>             <div id="hideDiv" style="display:none;"></div>         </div>     </form> </body> </html>//后台代码HttpPostedFile file = Request.Files["Filedata"];file.SaveAs("保存的服务器路径");

js下载:http://yunpan.cn/cf6Ya2hf6wUcd  提取码 8011

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/aiops/57955.html

(0)
上一篇 2021年8月9日 09:44
下一篇 2021年8月9日 09:44

相关推荐

发表回复

登录后才能评论