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表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
随机推荐
- Vue 路由的嵌套使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python--day62--删除出版社
删除成出版社关键代码:
- Codeforces Round #186 (Div. 2)
A. Ilya and Bank Account 模拟. B. Ilya and Queries 前缀和. C. Ilya and Matrix 考虑每个元素的贡献. 边长为\(2^n\)时,贡献为最 ...
- js 操作字符串方法记录
var str="helloworld"; 这三个方法如果只传一个参数默认截取到最后..将截取的字符返回,对原字符串没有任何改变 slice(star,end)//从索引star开 ...
- 为什么阿里代码规约要求避免使用 Apache BeanUtils 进行属性复制
缘起 有一次开发过程中,刚好看到小伙伴在调用 set 方法,将数据库中查询出来的 Po 对象的属性拷贝到 Vo 对象中,类似这样: 可以看出,Po 和 Vo 两个类的字段绝大部分是一样的,我们一个个地 ...
- 解决从旧格式的 csproj 迁移到新格式的 csproj 格式 AssemblyInfo 文件值重复问题
现在很多小伙伴开始使用了 dotnet core 项目,但是如果是从以前的 dotnet framework 的项目修改为 dotnet core 项目格式,会发现编译的时候出现了 AssemblyI ...
- git 安装及基本配置
git 基本上来说是开发者必备工具了,在服务器里没有 git 实在不太能说得过去.何况,没有 git 的话,面向github编程 从何说起,如同一个程序员断了左膀右臂. 你对流程熟悉后,只需要一分钟便 ...
- 2019-3-1-C#-double-好用的扩展
title author date CreateTime categories C# double 好用的扩展 lindexi 2019-3-1 9:19:5 +0800 2018-05-15 10: ...
- HTML是什么？
HTML,即超文本标记语言,它不是一种编程语言,而是一种标记语言,是网页制作所必备的.“超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.超文本标记语言的结构包括“头”部分.和“主体 ...
- <% %>、<%! %>和<%= %>
<% %> 此标签内的内容在jsp编译的时候,将被编译成servlet的_jspService()方法.这个方法用作服务器端向客户端输出.因此这对标签里边不能在定义方法了,因为在Java ...