input[type=file] 异步上传文件
背景
UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片。
拍照上传部分的代码如下
html部分
<div class="take-photo"><img src="./images/take-photo.png" class="take-phote-picture"><input type="file" name="file" accept="images/*" class="select-picture">
</div>
css部分
.take-phote-picture{margin: 10px 20px;width: 100px;
}.select-picture{opacity: 0;position: absolute;width: 100px;height: 100px;top: 10px;left: 70px;border-radius: 50px;
}
设计思路
将一个
input[type="file"]
的透明度设置为0,悬浮在img
标签之上。通过给input
标签绑定change
事件,获取上传的文件,异步上传。
问题
通过ajax
的data
属性提交到后台的数据必须是键值对(key-value
)的形式,其中值value
不能为二进制数据。而通过input
的files
属性获取的上传文件被格式化为二进制形式。
解决方案
define([], function () {/*** 跨域异步post提交工具 使用Formdata,非iframe 提交*/var ifajax = function(_url){var data = new FormData();var obj ={};obj.appendInput = function (input_obj) {if (input_obj.files) {for (var i = 0; i < input_obj.files.length; i++) {data.append(input_obj.name, input_obj.files[i]);}} else {data.append(input_obj.name, input_obj.value);}return this;};obj.submit = function (success,err) {var xhr = new XMLHttpRequest();var url = _url||"/club/apiv1/me/b64-upload";xhr.open("POST", url, true);xhr.setRequestHeader('Accept', '*/*');xhr.onload = function () {if (xhr.status == 200) {if (xhr.responseText) {try {//console.log(xhr);var json = $.parseJSON($.trim(xhr.responseText));success && success(json);} catch (e) {err && err("parse error", xhr.responseText);}}} else {var message = xhr.responseText, code = xhr.status;if (code === 413) {message = "上传文件大小超过限制"} else {try {var json = $.parseJSON(xhr.responseText);message = json.message;code = json.code;} catch (e) {}}err && err (code, message);}};xhr.send(data);return;}return obj;};return ifajax;
});
此外,还可以借助插件
ajaxFileUpload
实现异步上传文件
input[type=file] 异步上传文件相关推荐
- 解决利用<input type=“file“>上传文件时,value拿到的是fakePath问题
问题:上传文件之后,直接获取input.value是fakePath路径,因此不能通过此路径访问到文件 解决方案: 若不想修改系统配置,可利用js代码解决 oInputFile.onchange = ...
- html <input type=file>上传文件时,accept属性值汇总,支持文件格式,限制文件格式,限制上传图片的格式
限制文件格式 一.示例标签1: <input type="file" accept="image/*" /> accept属性说明: image表 ...
- input type=file 实现上传、预览、删除等功能
不知何时,突然对上传文件按钮起了浓厚的兴趣,当然这源于工作的需要.当时为了顺利上线,索性直接引用了jQuery的一个上传组件,简单粗暴. 后来闲下来,就对这个进行了一番研究,然后做了一个简单的Demo ...
- <input type=“flie“>上传文件
使用<input type="file">和JS实现上传图片操作. 1.先写出css样式,这里采用了响应式布局,写的移动端样式. <style>* {pad ...
- input type=file图片上传时,先预览
<label><input type="file" id="upload"> </label> js $("#up ...
- jQuery异步上传文件
jQuery异步上传文件 我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="fil ...
- php 下 html5 XHR2 + FormData + File API 上传文件
FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...
- 异步上传文件显示进度条
异步上传文件显示进度条 原文地址:异步上传文件显示进度条 问题 我们在写网站时难免会遇到需要上传文件的场景,但当上传大文件时比如5个G的文件直接用表单直接提交文件会出现页面卡顿.未响应等影响用户体验的 ...
- ajax 上传文件实例,Ajax异步上传文件实例代码分享
非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: Index $(function() { $(':button').click(function () { var formDat ...
最新文章
- OpenCV知识和项目列表
- 【整理】固定资产后续业务处理
- 配置MGR时修改了/etc/hosts但映射后的hostname不起作用
- webpack配置说明
- 绘制三维散点图_使用Origin,轻松绘制三维散点图
- 06-10 Jenkins 配置 allure 报告
- python职位应该叫什么_从事什么职位的人适合学习Python​?
- 像素生存者2为什么显示服务器不可用,像素生存者2为什么更新了玩不了 | 手游网游页游攻略大全...
- 刘国辉 :做银行背后的“卖水人”,是不是好生意?
- GeoServer地图开发解决方案(五):基于Silverlight技术的地图客户端实现
- 保险合同中的“不可抗辩条款”
- PHP5.5 ~ PHP7.2新特性总结
- Unity ASE点光源不显示的问题
- 执行董事和董事长有什么区别
- Pikachu靶场:XSS盲打
- 各个排序算法的时间复杂度和稳定性,快排的原理
- java bsdiff_Android差分包生成和合成新包-bsdiff
- 服装ERP系统的优势与缺点
- 微步在线:半年融资8亿,综合型网络安全“新贵”诞生
- ZCash的零知识证明
热门文章
- vue--为什么data属性必须是一个函数
- 常用的JavaScript模式
- linux 开启独立iptables日志
- [转载]ASP.NET Core 源码阅读笔记(1) ---Microsoft.Extensions.DependencyInjection
- [题解]第十一届北航程序设计竞赛预赛——L.偶回文串
- SVN用户验证,调错
- 【CF】556D A Lot of Games
- Cocos2D研究院之精灵与动画
- 大学开设python课程吗_在大学为什么你一定要学会Python?
- 剑指offer 算法 (知识迁移能力)