JS中使用FormData上传图片
2024-10-17 20:38:11
<!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
本文仅支持上传一张图片，望知道上传多张图片方法的朋友分享一下。
最新文章
- centos 7 配置iptables
- Java工程图标前面的红色叹号
- 18 BufferedReader使用方法
- logging模块使用示例
- asp.net中实现群发邮件功能
- C#网络编程简单实现通信小例子-1
- rabbitmq 消息持久化之receive and send
- Android系统设置— android.provider.Settings
- Linux下安装MySQL数据库(压缩包方式安装)
- Flex实现双轴条状图
- 优雅地 `async/await`
- vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
- C#4并行计算
- 关于Mysql 的 ICP、MRR、BKA等特性
- XML反序列化遇到数字型节点值为空导致反序列化异常
- python PIL 图像处理操作
- MVC ——设置启动 URL
- ASP.NET 实现多页面合并一页显示
- 【甘道夫】通过Mahout构建推荐系统--通过IDRescorer扩展评分规则
- linux系统调用sysconf