JS中使用FormData上传图片
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="UTF-8">
<title>使用FormData上传图片</title>
<style>
.clearflex:after{
content:'';
height:0;
display:block;
clear: both;
visibility: hidden;
}
.content{
width:600px;
height: 500px;
border-radius:10px;
padding:10px;
overflow-y: scroll;
margin:100px auto 0;
border:1px solid #333;
}
.upWrap{
width:100px;
height: 100px;
margin:10px;
float: left;
position: relative;
overflow: hidden;
}
.upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file]{
position: absolute;
height: 100%;
width:100%;
top:0;
left:0;
}
.fileWrap{
background:#eee;
}
input[type=file]{
z-index: 2;
opacity: 0;
}
.upWrap > .imgWrap{
z-index: 1;
}
.selected_img{
height: 100%;
}
.upedImg{
z-index: 3 !important;
}
.upedImg > span.deleteImg{
position:absolute;
content: 'X';
width:20px;
font-size: 16px;
color:#ff0000;
background:rgba(0,0,0,0.6);
height:20px;
text-align: center;
line-height: 20px;
right:0;
top:0;
z-index:4;
} .imgWrap{
width:100%;
height: 100%;
color:gray;
font-size: 72px;
position: absolute;
top:0;
left:0;
text-align: center;
}
.upload_btn{
width: 200px;
line-height: 59px;
color:#fff;
background: limegreen;
text-align: center;
border-radius: 10px;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="content clearFlex">
<form action="" enctype="multipart/form-data">
<div class="upImg clearflex">
<div class="imgOnloadWrap">
<!-- <div class="upWrap">
<div class="imgWrap upedImg">
<span class="deleteImg">X</span>
<img src="" alt="" class="selected_img">
</div>
</div> -->
</div>
<div class="upWrap">
<div class="imgWrap">+</div>
<div class="fileWrap">
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)" class="open_picture"/>
</div>
</div>
</div>
</form>
</div>
<div class="upload_btn">确认上传</div>
</body>
<script src="../assets/js/jquery.min.js"></script>
<script>
/*------------------------------上传图片---------------------------*/
var imgFile = '';
function upImg(obj){
imgFile = obj.files[0];
console.log(imgFile);
var img = new Image();
var fr = new FileReader();
fr.onload = function(){
var htmlStr = '<div class="upWrap">';
htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';
htmlStr += '<img src="'+fr.result+'" alt="" class="selected_img"/>';
htmlStr += '</div>';
htmlStr += '</div>';
$('.imgOnloadWrap').append(htmlStr);
obj.value = '';
}
fr.readAsDataURL(imgFile);
}
/*-----------------------------删除图片------------------------------*/
$(document).on('click','.upedImg .deleteImg',function(){
//处理未来事件
$(this).parent().parent().remove();
})
/*-----------------------------确认上传------------------------------*/
function uploadImg(){
var formData = new FormData();
formData.append('src',2);
formData.append('picture',imgFile); $.ajax({
url: '传输地址',
type: 'POST',
cache: false, //上传文件不需要缓存
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (res) {
console.log(res)
if(res.ret == 0){
console.log(上传成功)
}
},
error: function (err) {
console.log(err)
}
})
}
</script>
</html>
附支持的文件类型：
*.3gpp audio/3gpp， video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript， application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg， video/mpeg MPEG Audio/Video Stream， Layer II
*.mp3 audio/mpeg MPEG Audio Stream， Layer III
*.mp4 audio/mp4， video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream， Layer II
*.mpg video/mpeg MPEG Video Stream， Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg， audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf， text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml， application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive
本文仅支持上传一张图片，望知道上传多张图片方法的朋友分享一下。
JS中使用FormData上传图片的更多相关文章
- 关于ajaxfileupload.js一些问题和上传图片就立即显示图片功能
ajaxfileupload.js是上传文件的一个插件,最近碰到的一个问题是在谷歌浏览器上传文件之后,原文本框中的文件名称消失,网上搜了好长时间也没有十分满意的答案.无刷新上传文件我想到的只有ajax ...
- Vue.js中集成summernote
首先引用summernote样式及js: <!--summernote css --> <link href="${ctxPath}/static/css/summerno ...
- js中XMLHttpRequest对象实现GET、POST异步传输
js中XMLHttpRequest对象实现GET.POST异步传输 /* * 统一XHR接口 */ function createXHR() { // IE7+,Firefox, Opera, Chr ...
- 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问
利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...
- JS中字符串拼装 单双引号的处理 字符转义
js中可能会用到动态追加元素,可能数据也是从后台传过来的,当然有两种思路, 1.在后台拼装好直接返回; 2.在前台js里面拼装, 如果拼装大量的html时可能单双引号就容易出问题;那么如何解决呢?最近 ...
- MVC 中使用uploadify上传图片遇到的蛋疼问题
MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...
- JQuery中使用FormData异步提交数据和提交文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
随机推荐
- 2019-8-15-win10-edge-打开闪退问题
title author date CreateTime categories win10 edge 打开闪退问题 lindexi 2019-08-15 08:53:22 +0800 2019-8-1 ...
- 使用Fiddler抓取微信饿了么小程序数据
使用Fiddler抓取微信饿了么小程序数据 准备 一部装载Android 7.0以下的手机:此处使用华为荣耀5x 微信小程序7.0以下版本:此处为6.6.7.此处可通过豌豆荚应用下载. 安装好的Fid ...
- 【BZOJ 1004】 [HNOI2008]Cards
[题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1004 [题意] 给你sr+sb+sg张牌,(令n=sr+sb+sg),让你把这n张牌染 ...
- 常用mime.types
以下是从nginx配置文件mime.types中提取出的最常用的文件格式, 整理了下, 方便查看 类型 文件格式 default_type application/octet-stream - tex ...
- GitHub使用详细流程（多人开发）
联合项目开发GIThub使用 分支 在没有使用分支之前,git会默认有一个分支, 就是主分支(master分支,还记得 git push –u origin master这个命令吗?) 这里的mast ...
- 如何在很短的时间内将大量数据插入到ConcurrentHashMap（转）
将大批量数据保存到map中有两个地方的消耗将会是比较大的:第一个是扩容操作,第二个是锁资源的争夺.第一个扩容的问题,主要还是要通过配置合理的容量大小和扩容因子,尽可能减少扩容事件的发生:第二个锁资源的 ...
- 2018-2-13-win10-uwp-判断文件存在
title author date CreateTime categories win10 uwp 判断文件存在 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 1 ...
- 2019牛客多校第二场 A Eddy Walker（概率推公式）
2019牛客多校第二场 A Eddy Walker(概率推公式) 传送门:https://ac.nowcoder.com/acm/contest/882/A 题意: 给你一个长度为n的环,标号从0~n ...
- 使用Pandas加载数据
1.dataframe对象简述: dataframe为pandas中一种有行列索引的二维数据结构,可以看成在普通二维结构上加上行列id标记 示例为创建一个2X3的dataframe: import s ...
- [梁山好汉说IT] 边缘计算在梁山的应用
[梁山好汉说IT] 边缘计算在梁山的应用 0x00 摘要 梁山泊下四个酒店就是边缘计算在梁山的应用,以朱贵南山酒店为例能看出其"计算实时/省流量/具备智能"等各种优点. 0x01 ...