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表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
随机推荐
- 立足GitHub学编程：13个不容错过的Java项目
立足GitHub学编程:13个不容错过的Java项目 今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自 ...
- 【mac】关于mac的一些命令
一. 如何查看自己的文件大小,所有文件占了多少? du -h -d 1 . 当前目录文件以及大小 sudo du -h -d 1 / 所目录下的文件以及大小
- Jenkins 配置自动合并 release 分支到 master 分支
本文告诉大家如何在 Jenkins 配置合并到 release 的内容自动合并到 gitlab 的 master 分支 首先需要两个仓库,一个是 gitlab 的仓库,另一个是 Jenkins 的仓库 ...
- router-link-active的作用
如上图所示,创建了3个路由跳转选项,css实现后的效果如下 ↓↓↓ 当我切换“电影” “影院” “我的” 三个路由选项时,文字由黑色变成红色 此时可用vue自带的 router-link-active ...
- 2018-9-30-C#-传入-params-object-长度
title author date CreateTime categories C# 传入 params object 长度 lindexi 2018-09-30 18:33:20 +0800 201 ...
- Centos7网络连接不上：Network is unreachable 解决方案
有朋友的centos7装在虚拟机上挂起后在打开不能正常连接网络,我的也出现了这个问题,试着用dhclient重新分配一下地址,无奈系统提示dhclient正在运行,没办法只能试试其它办法,之后研究了一 ...
- pandas小程序应用-实验
背景:来自于日常工作,针对医院行政人员统计日常门诊信息,手工统计繁琐.容易出错的问题,结合实际特点,采用python对数据进行自动统计. 具体步骤如下: 1.引入python工具包. import p ...
- Qt4.5 QFrame（相当于Delphi里的TPanel，有各种凹凸方式）
QFrame类是有框架的窗口部件的基类. QPopupMenu使用这个来把菜单“升高”,高于周围屏幕.QProgressBar有“凹陷”的外观.QLabel有平坦的外观.这些有框架的窗口部件可以被改变 ...
- Java 8 默认接口实现及其他语言特性
一.为什么有默认接口实现 1.由于Java 8的API在现存的接口上引入了非常多的新方法(如List接口上的sort方法).在原有语法基础上,如Guava和Apache Commons这样的框架都需要 ...
- 【他山之石】IntelliJ Idea 内存设置
最近一次使用idea,删掉target目录内容,准备让项目重新编译的时候,整个mac系统崩溃然后黑屏重启了.紧接着就是重启后自动恢复原先打开的程序,结果再次黑屏重启.最开始以为是系统问题,还怀疑过最近 ...