分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

HTML5文件上传

HTML5   发布时间：2022-04-25  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5文件上传，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML代码：
源代码 复制(IE有效) 打印 关于
  1.        <div class="row">   
  2.       <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSELEcted();"/>  
  3.     </div>   
  4.     <div id="fileSize"></div>  
  5.     <div id="fileType"></div>  
  6.     <div class="row">  
  7.       <input type="button" onclick="uploadFile()" value="上传" />  
  8.     </div>  
  9.     <div id="progressnumber"></div>  
  10.                 <progress @H_648_22@max="100" id="progre" value="0"></progress>  
  11.                 <br />  
  12.                 <asp:Image ID="Image1"  Style="max-width:130px" runat="server" />  
  13.                 <asp:HiddenField ID="hfimg" value="" runat="server" />  

JS代码：
源代码 复制(IE有效) 打印 关于
  1.       <script type="text/javascript">  
  2.         function fileSELEcted() {  
  3.             var file = document.getElementById('fileToUpload').files[0];  
  4.             if (filE) {  
  5.                 var fileSize = 0;  
  6.                 if (file.size > 1024 * 1024)  
  7.                     fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).to@R_801_10495@ng() + 'MB';  
  8.                 else  
  9.                     fileSize = (Math.round(file.size * 100 / 1024) / 100).to@R_801_10495@ng() + 'KB';  
  10.   
  11.             
  12.                 document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;  
  13.                 document.getElementById('fileType').innerHTML = '文件类型: ' + file.type;  
  14.             }  
  15.         }  
  16.   
  17.         function uploadFile() {  
  18.             var fd = new FormData();  
  19.             fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);  
  20.             var xhr = new XMLhttprequest();  
  21.             xhr.upload.addEventListener("progress", uploadProgress, false);  
  22.             xhr.addEventListener("load", uploadComplete, false);  
  23.             xhr.addEventListener("error", uploadFailed, false);  
  24.             xhr.addEventListener("abort", uploadCanceled, false);  
  25.             xhr.open("POST", "/handler/h5upload.ashx");  
  26.             xhr.send(fd);  
  27.         }  
  28.   
  29.         function uploadProgress(evt) {  
  30.             if (evt.lengthComputablE) {  
  31.                 var percentComplete = Math.round(evt.loaded * 100 / evt.@R_19_10586@l);  
  32.                 document.getElementById('progressnumber').innerHTML = percentComplete.to@R_801_10495@ng() + '%';  
  33.                 document.getElementById('progre').value = percentComplete;  
  34.             }  
  35.             else {  
  36.                 document.getElementById('progressnumber').innerHTML = 'unable to compute';  
  37.             }  
  38.         }  
  39.   
  40.         function uploadComplete(evt) {  
  41.             /* This event is raised when the server send BACk a response */   
  42.           var json =eval("("+ evt.target.responseText+")");  
  43.           if (json.status=="no") {  
  44.               alert(json.info);  
  45.           }else{  
  46.             document.getElementById("<%=Image1.ClientID%>").src = json.path;  
  47.             document.getElementById("<%=hfimg.ClientID%>").value = json.path;   
  48.           }  
  49.         }  
  50.   
  51.         function uploadFailed(evt) {  
  52.             alert("There was an error attempTing to upload the file.");  
  53.         }  
  54.   
  55.         function uploadCanceled(evt) {  
  56.             alert("The upload has been canceled by the user or the browser dropped the connection.");  
  57.         }  
  58.     </script>  


后台ashx代码：
源代码 复制(IE有效) 打印 关于
  1.     context.Response.ContentType = "text/plain";  
  2.             httpPostedFile  file =context. request.Files["fileToUpload"];  
  3.             @R_801_10495@ng filename = file.Filename;  
  4.             @R_801_10495@ng fileExt = Path.GetExtension(fileName).ToLower();  
  5.   
  6.             //定义允许上传的文件扩展名  
  7.             Hashtable extTable = new Hashtable();  
  8.             extTable.Add("image", "gif,jpg,jpeg,png,bmp");  
  9.             extTable.Add("flash", "swf,flv");  
  10.             extTable.Add("media",flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");  
  11.             extTable.Add("file", "doc,docx,xls,xLSX,ppt,htm,html,txt,zip,rar,gz,bz2");  
  12.   
  13.             if (@R_801_10495@ng.IsNullOrEmpty(fileExt) || array.IndexOf(((@R_801_10495@ng)extTable["image"]).Split(','), fileExt.Sub@R_801_10495@ng(1).ToLower()) == -1)  
  14.             {  
  15.                 context.Response.Write(LitJson.JsonMapper.ToJson(new { status="no", info = "上传文件扩展名是不允许的扩展名。  
  16. 只允许" + ((@R_801_10495@ng)extTable["image"]) + "格式。" }));  
  17.                        
  18.                 return;  
  19.             }  
  20.             @R_801_10495@ng dirpath = "/upload/"+datetiR_528_11845@e.Now.To@R_801_10495@ng("yyyymMdd")+"/";  
  21.             if (!Directory.Exists(context.Server.MapPath( dirpath)))  
  22.             {  
  23.                 directory.CreateDirectory(context.Server.MapPath(dirpath));  
  24.             }  
  25.             @R_801_10495@ng newFilename = datetiR_528_11845@e.Now.To@R_801_10495@ng("yyyymMddHHmmss_ffff", datetiR_528_11845@eFormaTinfo.InvarianTinfo) + fileExt;  
  26.   
  27.             file.SaveAs(context.Server.MapPath(dirpath) + newFileName);  
  28.             context.Response.Write(LitJson.JsonMapper.ToJson(new { status="ok",path = dirpath+newFilename}));  

浏览(505) | 评论(0) | 分类: javascript

大佬总结

以上是大佬教程为你收集整理的HTML5文件上传全部内容，希望文章能够帮你解决HTML5文件上传所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：5htmlhtml5上传文件
猜你在找的HTML5相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap