h5移动端实现图片文件上传
Posted ypppt
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5移动端实现图片文件上传相关的知识,希望对你有一定的参考价值。
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。
JS代码:
<script type="text/javascript"> function fileSelected() { var file = document.getElementById(‘fileToUpload‘).files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + ‘MB‘; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB‘; document.getElementById(‘fileName‘).innerhtml = ‘Name: ‘ + file.name; document.getElementById(‘fileSize‘).innerHTML = ‘Size: ‘ + fileSize; document.getElementById(‘fileType‘).innerHTML = ‘Type: ‘ + file.type; } } function uploadFile() { var fd = new FormData(); fd.append("fileToUpload", document.getElementById(‘fileToUpload‘).files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "/Home/Upload"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById(‘progressNumber‘).innerHTML = percentComplete.toString() + ‘%‘; } else { document.getElementById(‘progressNumber‘).innerHTML = ‘unable to compute‘; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } </script>
Html代码:
<h1>单文件上传</h1> <form id="form1" enctype="multipart/form-data" method="post" action="/Home/Upload"> <div class="row"> <label for="fileToUpload">Select a File to Upload</label><br /> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> </div> <div id="fileName"></div> <div id="fileSize"></div> <div id="fileType"></div> <div class="row"> <input type="button" onclick="uploadFile()" value="Upload" /> </div> <div id="progressNumber"></div> </form>
办公资源网址导航 https://www.wode007.com
后端代码:
1 public ActionResult Upload() { 2 HttpPostedFileBase file = Request.Files["fileToUpload"]; 3 file.SaveAs(Server.MapPath("/upload/")+file.FileName); 4 return Content(file.FileName+"上传成功!"); 5 }
以上是关于h5移动端实现图片文件上传的主要内容,如果未能解决你的问题,请参考以下文章