文件上傳功能在專案中常會用到,本文跟大家介紹兩種文件上傳的實作-Ajax和form iframe,有興趣的朋友一起學習吧
自從有html5之後,文件上傳變的非常簡單。很方便的解決了專案中需要用到的文件上傳功能。 HTML5支援多圖上傳,而且支援ajax上傳,而且支援上傳之前圖片的預覽,而且支援圖片拖曳上傳,而且還是純粹利用file控制項實現,JS程式碼寥寥,想不讓人稱讚都難啊!
HTML5Ajax上傳
html5的上傳實現,是需要file控制項以及XMLHttpRequest請求。以下是我封裝的一個上傳外掛:
function fileUpload(options) { var opts = options || {}; var func = function() {}; this.fileInput = opts.fileInput || null; this.url = opts.url || ''; this.fileList = []; this.onFilter = opts.onFilter || function(f) {return f;}; //选择文件组的过滤方法 this.onSelect = opts.onSelect || func; //文件选择后 this.onProgress = opts.onProgress || func; //文件上传进度 this.onSuccess = opts.onSuccess || func; //文件上传成功时 this.onFailure = opts.onFailure || func; //文件上传失败时; this.onComplete = opts.onComplete || func; //文件全部上传完毕时 this.init(); } fileUpload.prototype = { dealFiles: function(e) { //获取要上传的文件数组(用户选择文件后执行) var files = e.target.files || e.dataTransfer.files; this.fileList = this.onFilter(files); for(var i = 0, file; file = this.fileList[i]; i++){ //增加唯一索引值 file.index = i; } this.onSelect(this.fileList); return this; }, removeFile: function(fileDelete) { //删除某一个文件 var arrFile = []; for(var i = 0, file; file = this.fileList[i]; i++){ if (file != fileDelete) { arrFile.push(file); } } this.fileList = arrFile; return this; }, removeAll: function() { //清空文件队列 this.fileList = []; return this; }, uploadFile: function() { //上传文件 var me = this; for(var i = 0, file; file = this.fileList[i]; i++){ (function(file) { var formData = new FormData(); var xhr = new XMLHttpRequest(); if (xhr.upload) { xhr.upload.addEventListener("progress", function(e) { // 上传中 me.onProgress(file, e.loaded, e.total); }, false); xhr.onreadystatechange = function(e) { // 文件上传成功或是失败 if (xhr.readyState == 4) { if (xhr.status == 200) { me.onSuccess(file, xhr.responseText); me.removeFile(file); if (!me.fileList.length) { me.onComplete(); //上传全部完毕。执行回调 } } else { me.onFailure(file, xhr.responseText); } } }; // 开始上传 formData.append('file', file); xhr.open("POST", me.url, true); xhr.send(formData); } })(file); } }, init: function() { var me = this; //文件选择控件选择 if (me.fileInput) { me.fileInput.addEventListener("change", function(e) { me.dealFiles(e); }, false); } } };
#相信大家也看到了,程式碼中出現了formData,這就是html5的神奇之處了。使用formData輕鬆實現非同步無刷新支援預覽圖片的多檔案上傳功能。而且,令人欣慰的是,現在已經有很多瀏覽器都已經支援html5了。
但是! ! ! ie9以下的版本不支援呀! !
除此之外,上面的方法還有一個弊端,因為使用了ajax的上傳方式,所以不能支援跨域上傳,如果必須要滿足這兩個業務場景,那就試試下面的方法吧,借助form和iframe來實作上傳。以下來詳細看一下:
form表單提交到iframe
##html程式碼:
<iframe name="demoIframe" style="display:none"></iframe> <form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data"> <input class="filename" type="file" name="fileLabel"> <input type="submit" value="提交"> </form>我們點選提交,可以看到下面的請求: 已經把文件上傳。那麼,加入這個upload.php介面可用,而且假如上傳成功後,會回傳:
#
{ "code": "200", "success": true, "data": { ... } }我們要怎麼去取得回傳值,從而進行下一步的操作呢?因為我們是上傳到了iframe中,所以我們只需要監聽iframe的load事件,如果有回傳值了,我們就能取得到,從而進行進一步處理。看js程式碼:
$('iframe').on('load', function() { var responseText = $('iframe')[0].contentDocument.body.textContent; var responseData = JSON.parse(responseText) || {}; if (responseData.isSuccess == true || responseData.code == 200) { //success } else { //error } });上面是我整理給大家的,希望今後會對大家有幫助。 相關文章:
########################
以上是詳解Ajax和form+iframe 實作檔案上傳的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!