Ajax方式实现文件上传

    xiaoxiao2025-09-14  58

    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://ju.6miu.com/read-1302643.html
    最新回复(0)