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表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
随机推荐
- PHP两个变量值互换(不用第三变量)
<?php /** * 双方变量为数字或者字符串时 * 使用list()和array()方法可以达到交换变量值得目的 */ $a = "This is A"; // a ...
- pycharm下的多个python版本共存（一）
经历过IDLE,anaconda,和pycharn的编程环境,并进行了一段时间的项目编程后,决定使用pycharm作为以后的工作环境. 一方面因为项目组其他人推荐,另一方面在使用过程中比较顺手.当然很 ...
- notepad2正则表达式替换字符串
例子: 1-385-463-3226替换成13854633226 Ctrl+H开启替换,选中'regular expression search'或者正则表达式: 上面输入:1-(.*)-(.*)-( ...
- Python--day43--mysql唯一索引和外键变种之多对多
唯一索引:(unique关键字)unique 名字 (num) 外键的变种:
- python的for循环、下标和切片
for循环的格式 for 临时变量 in 列表或者字符串: 循环满足条件时执行的代码 else: 循环不满足条件时执行的代码 例: name = "abcdef&qu ...
- mysql导出csv/sql/newTable/txt的方法,mysql的导入txt/sql方法...mysql备份恢复mysqlhotcopy、二进制日志binlog、直接备份文件、备份策略、灾难恢复.....................................................
mysql备份表结构和数据 方法一. Create table new_table_nam备份到新表:MYSQL不支持: Select * Into new_table_name from old_t ...
- H3C设置下次启动的配置文件
- Linux 内核存取配置空间
在驱动已探测到设备后, 它常常需要读或写 3 个地址空间: 内存, 端口, 和配置. 特别 地, 存取配置空间对驱动是至关重要的, 因为这是唯一的找到设备被映射到内存和 I/O 空间的位置的方法. 因 ...
- dotnet 非泛型 类型 System.Collections.IEnumerable 不能与类型实参一起使用
如果在开发的时候遇到非泛型 类型"IEnumerable"不能与类型参数一起使用,那么就是变量的命名空间没弄对 在 dotnet 里面有 System.Collections.IE ...
- 洛谷——P1305 新二叉树（新建二叉树以及遍历）
题目描述输入一串二叉树,用遍历前序打出. 输入输出格式输入格式: 第一行为二叉树的节点数n.(n \leq 26n≤26) 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示 输 ...