Javascrpt無刷新文件上傳

本文轉載自查看原文 2015-03-19 22:39 5279 javascript

　　最近工作中遇到上傳文件問題，主要需求是一步點擊上傳，兼容ie8+，當時用的dojox/form/uploader控件，這兩天扒了一下源碼，明白了原理拿出來分享一下。

總體思路如下：

1、對於支持XMLHttpRequest2的瀏覽器使用FormData通過ajax上傳

2、對於ie10一下的瀏覽器使用iframe異步上傳，還需后台服務器做相應處理，這部分也是dojo/request/iframe上傳文件的原理。

一、使用FormData上傳文件

　　FormData最頻繁使用的功能就是表單序列化及創建與表單格式相同的數據。append方法接收兩個參數，字段名與字段值，字段值可以是 File、 Blob、String.

1 var data = new FormData(form);
2 data.append("name", "woodtree");
3 data.append(file.name, file);
4 data.append(name, Blob);

　　如果直接向FormData的構造函數中傳入表單元素，可以將表單元素的數據預先填入。

1 new FormData(document.forms[0])

　　FormData的另一個便利之處就是不用明確指定Content-Type頭部，xhr對象能夠根據FormData實例自動配置適當的頭部。下面是一個簡單的上傳文件demo。

 1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 6     <title>FormData</title>
 7   </head>
 8   <body>
 9       <form id="uploader" action="/upload" enctype="multipart/form-data">
10           <input id="app" type="file" multiple>
11           <input type="submit" value="Submit">
12       </form>
13       <script>
14         var form = document.getElementById('uploader');
15         var app = document.getElementById('app');
16         form.addEventListener('submit', function(evt) {
17             evt.preventDefault();//組織頁面刷新
18             var data = new FormData();
19             for (var i = 0, len = app.files.length; i < len; i++) {
20                 //file property: name, size, type, lastModifiedDate
21                 var file = app.files[i];
22                 data.append(file.name, file);
23             }
24 
25             var xhr = new XMLHttpRequest();
26             xhr.onload = function() {
27                 alert(JSON.parse(xhr.responseText).success);
28             };
29             xhr.onerror = function(err) {
30                 console.error(err);
31             };
32             xhr.open('post', './upload', true);
33             xhr.send(data);
34         }, false);
35     </script>
36   </body>
37 </html>

View Code

　　server端代碼使用formidable模塊將文件暫存在tmp目錄下。

 1 var http = require('http');
 2 var url = require('url');
 3 var fs = require('fs');
 4 var qs = require('querystring');
 5 var request = require('request');
 6 var formidable = require('formidable');
 7 
 8 http.createServer(function(req, res){
 9     var _url = url.parse(req.url);
10     if (_url.pathname === '/index') {
11         fs.readFile('./index.html', function(err, data) {
12           res.writeHead(200, {"Content-Type": "text/html; charset=UTF-8"});
13             res.write(data);
14             res.end();
15         });
16     } else if (_url.pathname === '/upload') {
17         console.log(req.headers['content-type']);
18         handle(req, res);
19     }
20 }).listen(8888);
21 var handle = function(req, res) {
22     if (req.headers['content-type'].indexOf('multipart/form-data') >= 0) {
23         var formStream = new formidable.IncomingForm();
24         formStream.uploadDir = './tmp';
25         formStream.parse(req, function(err, fields, files) {
26             res.writeHead(200, {"Content-Type": "application/json"});
27             if (err) {
28                 res.write('{"success": false}');
29             } else {
30                 res.write('{"success": true}');
31             }
32             res.end();
33         });
34     }
35 }

View Code

　　查看請求，xhr自動為我們設置請求頭部。

　　兼容性問題

二、使用iframe上傳文件

　　兼容舊版本的ie瀏覽器實現無刷新上傳，只能借由iframe來實現，大多數類庫的做法是動態插入一個iframe元素，將form元素的target屬性設置為新添加的iframe，這樣只刷新了iframe的內容而避免頁面跳轉到form元素的action屬性所指定的url。這里我們根據dojo/request/iframe模塊的原理來實現上傳文件。

　　該模塊需要后台返回響應的格式來配合。將需要返回的信息放在`textarea`標簽內。然后綁定iframe的load事件，通過`doc.getElementsByTagName('textarea')`取得textarea中的數據。

1 <html>
2   <body>
3     <textarea>
4       uploadInfo
5     </textarea>
6   </body>
7 </html>

　　下面是簡單的demo

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
        <title>ArcGIS Web Application</title>
    </head>
    <body class="claro">
        <form id="uploader" method="post" action="/upload" target="appFrame" encoding="multipart/form-data" enctype="multipart/form-data">
            <input id="appInput" name="app" type="file" >
        </form>
        <iframe id="frame" name="appFrame" src="" style="visibility:hidden;"></iframe>
        <script type="text/javascript">
            var upload = document.getElementById('placeholder');
            var uploader = document.getElementById('uploader');
            var app = document.getElementsByName('app')[0];
            var clickLietener = function() {
                app.click();
            }
            var changeListener = function() {
                uploader.submit();
            }
            if (app.addEventListener) {
                app.addEventListener('change', changeListener, false);
            } else if (app.attachEvent) {
                app.attachEvent('onchange', changeListener);
            }
            var appFrame = document.getElementById('frame');
            var listener = function() {
                var doc = appFrame.contentWindow.document;
                var textAreas = doc.getElementsByTagName('textarea');
                if (textAreas && textAreas.length > 0) {
                    var response = textAreas[0].value;
                    alert(response);
                }
            }
            if (appFrame.addEventListener) {
                appFrame.addEventListener('load', function(evt) {
                    listener();
                }, false);
            } else if(appFrame.attachEvent) {
                appFrame.attachEvent('onload', function() {
                    listener();
                });
            }
            
        </script>
    </body>
</html>

View Code

 1 var http = require('http');
 2 var url = require('url');
 3 var fs = require('fs');
 4 var qs = require('querystring');
 5 var formidable = require('formidable');
 6 
 7 http.createServer(function(req, res) {
 8   var _url = url.parse(req.url);
 9   if (_url.pathname === '/index') {
10     fs.readFile('./index.html', function(err, data) {
11       res.writeHead(200, {
12         "Content-Type": "text/html; charset=UTF-8"
13       });
14       res.write(data);
15       res.end();
16     });
17   } else if (_url.pathname === '/upload') {
18     var formStream = new formidable.IncomingForm();
19     formStream.uploadDir = './tmp';
20     formStream.parse(req, function(err, fields, files) {
21       console.log(fields);
22       console.log(files);
23       var info = null;
24       var accept = req.headers.accept;
25       if (err) {
26         info = {success: false};
27       } else {
28         info = {success: true};
29       }
30       if (accept.indexOf('application/json') > -1) {
31         res.writeHead(200, {
32           "Content-Type": "application/json;charset=utf-8"
33         });
34         res.write(JSON.stringify(info));
35       } else {
36         res.writeHead(200, {
37           "Content-Type": "text/html; charset=UTF-8"
38         });
39         var responseText = '<html><body><textarea>' +
40           JSON.stringify(info) +
41           '</textarea></body></html>';
42         res.write(responseText);
43       }
44       res.end();
45     });
46   }
47 }).listen(8888);

View Code

　　后台代碼需要注意Content-Type響應頭的設置，ie8、9碰到不知如何渲染的MIME類型會把它當成文件下載下來。這里和這里

　　不知大家有沒有注意到，上面的demo是一步上傳，選擇好文件后直接上傳到服務器，ie8以上的瀏覽器沒問題，如果是在ie8中情況就有些棘手。ie中文件上傳控件長成這個樣子，單擊一下button會彈出文件選擇框，如果單擊的是text部分，沒有反映，你需要雙擊才會彈出選擇框。一個辦法是讓鼠標盡量單擊button部分，button的大小跟font-size有關。但如果你的可點擊區域太大。。。。。

　　所幸還是有解決辦法的，這時需要在form中加一個label標簽，for屬性指向file。這樣點擊label時會觸發for指向元素的click事件，這時label的自然行為。同時把file移除屏幕外。注意一定不能用input[type=button]，在點擊button時候調用file的click事件，然后在file change事件中調用form.submit方法，這種行為在ie中是被禁止的，回報“access denied”錯誤。

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 6     <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
 7         <title>ArcGIS Web Application</title>
 8     </head>
 9     <body class="claro">
10         <form id="uploader" method="post" action="/upload" target="appFrame" encoding="multipart/form-data" enctype="multipart/form-data">
11             <label id="placeholder" for="appInput">upload</label>
12             <input id="appInput" name="app" type="file" style="position:absolute;left:-800px;">
13         </form>
14         <iframe id="frame" name="appFrame" src="" style="visibility:hidden;"></iframe>
15         <script type="text/javascript">
16             var upload = document.getElementById('placeholder');
17             var uploader = document.getElementById('uploader');
18             var app = document.getElementsByName('app')[0];
19             var changeListener = function() {
20                 uploader.submit();
21             }
22             if (app.addEventListener) {
23                 app.addEventListener('change', changeListener, false);
24             } else if (app.attachEvent) {
25                 app.attachEvent('onchange', changeListener);
26             }
27             var appFrame = document.getElementById('frame');
28             var listener = function() {
29                 var doc = appFrame.contentWindow.document;
30                 var textAreas = doc.getElementsByTagName('textarea');
31                 if (textAreas && textAreas.length > 0) {
32                     var response = textAreas[0].value;
33                     alert(response);
34                 }
35             }
36             if (appFrame.addEventListener) {
37                 appFrame.addEventListener('load', function(evt) {
38                     listener();
39                 }, false);
40             } else if(appFrame.attachEvent) {
41                 appFrame.attachEvent('onload', function() {
42                     listener();
43                 });
44             }
45             
46         </script>
47     </body>
48 </html>

View Code

參考資料

文件上傳的漸進式增強 - 阮一峰的網絡日志

Uploading Files with AJAX

ie javascript form submit with file input

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於jQuery Ajax實現無刷新文件上傳 easyui+ajaxfileupload,無刷新文件上傳 js 無刷新文件上傳 (兼容IE9 ) 實用ExtJS教程100例-009：ExtJS Form無刷新文件上傳 SpringMVC ajax技術無刷新文件上傳下載刪除示例 Asp.Net 無刷新文件上傳並顯示進度條的實現方法及思路 angularJS實現無刷新文件下載 Asp.Net實現無刷新文件上傳並顯示進度條(非服務器控件實現) Android的Device File Explorer刷新文件 Mac刷新文件夾的問題