技术思绪摘录旅行
通过Ajax方式上传文件,使用FormData进行Ajax请求,可以保持页面不刷新,给用户提供更高的体验,对于开发者而言,也更方便。

1.使用<form>表单初始化FormData对象方式上传文件

HTML代码


<form id="uploadForm" enctype="multipart/form-data">

    <input id="file" type="file" name="file"/>

    <button id="upload" type="button">upload</button>

</form>


javascript代码


$.ajax({

    url: '/upload',

    type: 'POST',

    cache: false,

    data: new FormData($('#uploadForm')[0]),

    processData: false,

    contentType: false}).done(function(res) {

}).fail(function(res) {});


这里要注意几点:


processData设置为false。因为data值是FormData对象,不需要对数据做处理。

<form>标签添加enctype="multipart/form-data"属性。

cache设置为false,上传文件不需要缓存。

contentType设置为false,不设置contentType值,因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"。


如果不是用<form>表单构造FormData对象又该怎么做呢?


2.使用FormData对象添加字段方式上传文件



HTML代码


<div id="uploadForm">

    <input id="file" type="file"/>

    <button id="upload" type="button">upload</button>

</div>

这里没有<form>标签,也没有enctype="multipart/form-data"属性。


javascript代码


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



这里有几处不一样:


append()的第二个参数应是文件对象,即$('#file')[0].files[0]。

contentType也要设置为‘false’。

从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件,

只需要在<input type="file">里添加multiple或multiple="multiple"属性。




3.服务器端读文件

Request.Form["UserName"].ToString();

HttpPostedFileBase file1 = Request.Files["file1"];

file1.SaveAs(Server.MapPath(PageParam.PicturePath) + CardPositive);


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫