input=file 通过Ajax上传
来源:互联网 发布:网络赢钱游戏 编辑:程序博客网 时间:2024/04/28 12:55
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);});
转载地址
阅读全文
0 0
- input=file 通过Ajax上传
- 通过<input type=“file”>上传文件问题
- 使用input file 通过ajax 上传文件中onChange事件只触发一次问题
- input=file 上传图片
- ajax+ashx 完美实现input file上传文件
- Asp.net网站中 js通过input type="file" 上传文件
- asp.net中通过input file上传文件
- ASP.NET MVC利用input通过ajax上传文件
- input type='file' 上传错误
- 上传附件<input type="file">规则
- 使用input type="file"上传文件
- input type=file 服务器端上传文件
- <input type="file"/> 文件上传
- input[type='file'] img图片上传
- 上传图片附件验证 input【type='file'】
- 上传表格input【type="file"】
- input file 上传文件
- 美化上传input file
- [线段树]HDU 4942——Game on S♂play
- 第五周项目2——建立链栈算法库
- python自学(1)-安装环境及工具、学习教程资料的准备
- 容器扩展点:后置处理器BeanPostProcessor
- 376
- input=file 通过Ajax上传
- Redis理解
- [日推荐]『拉勾招聘』手机APP可以卸掉啦!
- 手机联网状态
- 3S基础知识:GIS中的坐标系定义与转换
- ATLANT——全球房地产区域链平台
- Android 6.0以后权限申请问题
- Deep Learning(一):CNN经典网络模型摘要--AlexNet、ZFnet、GoogleNet、VGG、ResNet
- 多线程之 悲观锁,乐观锁