HTML5+Ajax上传文件

导读:本篇文章讲解 HTML5+Ajax上传文件,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

#HTML

input类型设为file:

<label for="img_input"></label>
<input id="img_input" type="file"/>

如果想上传多文件,可添加multiple

<input type="file" name="img" multiple="multiple" />

用accept=”MIME_type”限制提交的文件类型,用逗号隔开的 MIME 类型列表(服务器端也要最好类型检测双保险),如:

<input type="file" accept="image/gif, image/jpeg" />
<input type="file" accept="image/*"/>

获取文件内容
JavaScript:

var file = document.getElementById('fileToUpload').files[0];
jQuery:

var file = $("#img_input").prop("files")[0];

上传

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

// 创建

var form_data = new FormData();
// 获取文件
var file_data = $("#img_input").prop("files")[0];

// 把所以表单信息
form_data.append("id", "001");
form_data.append("name", "test");
form_data.append("img", file_data);
$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    processData: false,  // 注意:让jQuery不要处理数据
    contentType: false,  // 注意:让jQuery不要设置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

多文件上传

方法一 :一次性上传多个文件

如果后台接口允许多文件上传,就把文件存到一个变量后上传。

方法二 :一次性上传多个文件

如果后台接口要求单个文件,就循环获取文件信息提交,Ajax使用同步上传async: false。

跨域
JSONP是使用GET方法,无法发送文件。可以让后台开启CORS,Ajax也使用跨域crossDomain: true即可。

$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    crossDomain: true,
    processData: false,  // 注意:让jQuery不要处理数据
    contentType: false,  // 注意:让jQuery不要设置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/75532.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!