javascript 文件上传方式

淡淡的烟草味﹌ 2022-07-13 00:46 717阅读 0赞

**js处理文件上传方式**

1.通过FormData封装数据对象提交到服务端（这样的好处是，可以通过ajax方式提交）

1)如果是表单提交,则通过如下方式提交：

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
    </form>
    $("#upload").click(function(){
       $.ajax({
    	url: '/upload',
    	type: 'POST',
    	cache: false,
    	data: new FormData($('#uploadForm')[0]),
    	processData: false, //不要去处理发送的数据
    	contentType: false  //不要去设置Content-Type请求头
    }).done(function(res) {
    }).fail(function(res) {});
    });

2)如果不是表单提交，则通过如下方式

<div id="uploadForm">
    	<input id="file" type="file"/>
    	<button id="upload" type="button">upload</button>
    </div>
    var formData = new FormData();
    formData.append('file', $('#file')[0].files[0]);
    $.ajax({
    	url: '/upload',
    	type: 'POST',
    	cache: false,
    	data: formData,
    	processData: false,
    	contentType: false
    }).done(function(res) {
    }).fail(function(res) {});

2.直接通过的表单的形式，将文件提交的到服务端（注意：表单中enctype 填写"multipart/form-data"）

3.通过第三方插件的方式提交。这里提高ajaxFileUpload

语法：$.ajaxFileUpload(\[options\])  
  
    　　options参数说明：  
  
        1、url　　　　　　　　　　  上传处理程序地址。　　  
        2，fileElementId　　　　　   需要上传的文件域的ID，即<input type="file" id=“fileData” name="fileName">的ID。  
        3，secureuri　　　　　　　  是否启用安全提交，默认为false。  
        4，dataType　　　　　　　   服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。  
        5，success　　　　　　　　 提交成功后自动执行的处理函数，参数data就是服务器返回的数据。  
        6，error　　　　　　　　　  提交失败自动执行的处理函数。  
        7，data    　　　　　　　　自定义参数.  
        8, type    　　　　　　　　　 当要提交自定义参数时，这个参数要设置成post

<body>
    		<p><input type="file" id="fileName" name="fileName" /></p>
    		<input type="button" value="上传" />
    	    </body>
    		
    	    function ajaxFileUpload() {
                $.ajaxFileUpload
                (
                    {
                        url: '/upload.do', //用于文件上传的服务器端请求地址
                        secureuri: false, //是否需要安全协议，一般设置为false
                        fileElementId: 'fileName', //文件上传域的ID
                        dataType: 'json', //返回值类型 一般设置为json
                        success: function (data, status)  //服务器成功响应处理函数
                        {
                            //do something
                        },
                        error: function (data, status, e)//服务器响应失败处理函数
                        {
                            alert(e);
                        }
                    }
                )
                return false;
            }