XMLHttpRequest Level 2添加了一个新的接口FormData,使用FormData的可以异步上传一个二进制文件.
许多主流浏览器都支持 FormData 对象,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
FormData 具体信息参考:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
页面文件
<form id="uploadForm" enctype="multipart/form-data" class="form-horizontal form-bordered"> <div> <label>请选择需要上传的组件:<br /> <a href="javascript:;" class="btn red" id="importPlugin"> <span class="glyphicon glyphicon-download-alt"></span> 打开 </a> <span id="fileNameDes"></span> </label> <input type="file" style="display: none" id="fileSelect" name="userfile" accept="application/x-compressed"/> </div> <div> ... ... </div> </form>
js脚本
$("#importPlugin").click(function(){ $("#fileSelect").click(); });
//检测选择文件事件 $("#fileSelect").change(function(){ var fileSelector = $("#fileSelect")[0].files; $('#fileNameDes').text(fileSelector[0].name); if(fileSelector.length > 0) { var file = fileSelector[0]; var nameArr = file.name.split('.'); if(nameArr[1] != 'tgz'){ hint_func('error','','仅支持tgz文件上传,请重新选择正确文件'); return false; } else { var formData = new FormData($( "#uploadForm" )[0]); var obj = document.getElementById("FileMD5"); $.ajax({ url: 'index.PHP/upload/up',type: 'post',data: formData,async: false,cache: false,contentType: false,processData: false,success: function (datas) { var result = JSON.parse(datas); if(code == 0){ ...... } else{ ...... } },error: function (datas) { ...... } }); } } });控制器按照正常表单接收流程即可。 原文链接:https://www.f2er.com/ajax/161938.html