HTML5+Ajax上传文件

qieangel2013 发布于2019-08-19 17:45 / 3424人阅读

摘要：比起普通的，使用的最大优点就是我们可以异步上传一个二进制文件。方法二一次性上传多个文件如果后台接口要求单个文件，就循环获取文件信息提交，使用同步上传。

欢迎交换友链 Laker"s Blog--进击的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

HTML

input类型设为file：

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

用accept="MIME_type"限制提交的文件类型，用逗号隔开的 MIME 类型列表（服务器端也要最好类型检测双保险），如：

获取文件内容

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

海外云主机云服务器 ajax上传文件 ajax文件上传 ajax实现文件上传 Ajax文件上传库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78819.html

PHP_Ajax

摘要：简介业务做一个在线投票，给歌手投票。提交到当前页面的中达到效果。用户名密码注册总结在不使用对象的情况下，依然可以用来实现对后台服务器的请求，同时不带来页面刷新或者跳转。 ajax 简介业务：做一个在线投票，给歌手投票。要求：无刷新，并且不允许使用XMLHttpRequest对象.分析:在XHR对象，没有流行之前，已经有了无刷新这种效果的方法. 从http角度看，可以利用204 No...

MiracleWong 2019-06-27 15:05 评论0 收藏0
【方法】Html5实现文件异步上传

摘要：简介开发文件上传功能从来不是一件愉快的事，异步上传更是如此，使用过和的上传方案，也都感觉十分的别扭。本文简要简绍利用的实现文件的异步上传，还可以实现上传进度条和文件大小验证等。服务端使用的方案进行处理。 1 简介开发文件上传功能从来不是一件愉快的事，异步上传更是如此，使用过iframe和Flash的上传方案，也都感觉十分的别扭。本文简要简绍利用Html5的FormData实现文件的异...

justCoding 2019-08-20 16:41 评论0 收藏0
HTML5调用本地摄像头画面，拍照，上传服务器

摘要：图片数据绘制到先构造对象，为，图片之后绘制到的图片文件数据绘制到还是先转换成一个，然后构造对象，为，图片之后绘制到利用上面的函数，由对象得到格式的，再参考图片数据绘制到转换为对象并使用发送转换为对象后，可以使用上传图像文件。实现功能和适用业务采集本地摄像头获取摄像头画面，拍照保存，上传服务器；前端上传图片处理，展示，缩小，裁剪，上传服务器实现步骤调取本地摄像头（get...

ShevaKuilin 2019-08-01 18:18 评论0 收藏0