javascript 文件上传方式

最新推荐文章于 2024-02-02 10:31:43 发布

鸿非凡

最新推荐文章于 2024-02-02 10:31:43 发布

阅读量438

点赞数

分类专栏： web前端文章标签： ajax 表单 javascript

本文链接：https://blog.csdn.net/u013185652/article/details/53709325

版权

web前端专栏收录该内容

4 篇文章 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"）

<form id="uploadForm" enctype="multipart/form-data" action="url" method="post">
	<input id="file" type="file" name="file"/>
	<input type="submit" value="提交">
</form>

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;
        }