JavaScript实现图片上传并预览并提交ajax


Posted in Javascript onSeptember 30, 2019

本文实例为大家分享了JavaScript实现图片上传并预览并提交ajax的具体代码,供大家参考,具体内容如下

图片上传并预览

JavaScript实现图片上传并预览并提交ajax

HTML

<div class="file-box">
 <img id="preview" />
 <input type="text" id="imgfield" class="txt" placeholder="预览">
 <input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" "imgPreview(this)" > 
</div>

css

.file-box {
 position: relative;
 display: inline-block;
}
.file-box img {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 position: absolute;
 top: -30px;
 left: 0;
 display: inline-block;
 border: none;
}
.file-box .txt,.file-box .file {
 width: 70px;
 height: 36px;
 position: absolute;
 top: -20px;
 left: 100px;
 text-align: center;
}

JS

function imgPreview(fileDom) {
 //判断是否支持FileReader
 if(window.FileReader) {
 var reader = new FileReader();
 } else {
 alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
 }
 //获取文件
 var file = fileDom.files[0];
 var imageType = /^image\//;
 //是否是图片
 if(!imageType.test(file.type)) {
 alert("请选择图片!");
 return;
 }
 //读取完成
 reader.onload = function(e) {
 //获取图片dom
 var img = document.getElementById("preview");
 //图片路径设置为读取的图片
 img.src = e.target.result;
 };
 reader.readAsDataURL(file);
}

上传图片提交ajax

如果想把图片信息通过ajax传给后端,则需要通过new FormData() 上传图片信息,然后使用 append() 方法向该对象里添加字段,具体代码如下:

(注:以下代码在图片预览成功后执行,也就是在reader.readAsDataURL(file); 后)

var formData = new FormData(); 
formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数
formData.append('sizeid',123); //添加其他参数
$.ajax({
 url: '/material/uploadFile',
 type: 'POST',
 cache: false, //上传文件不需要缓存
 data: formData,
 processData: false, // 告诉jQuery不要去处理发送的数据
 contentType: false, // 告诉jQuery不要去设置Content-Type请求头
 success: function (data) {
 var rs = eval("("+data+")");
 if(rs.state==1){
 tipTopShow('上传成功!');
 }else{
 tipTopShow(rs.msg);
 }
 },
 error: function (data) {
 tipTopShow("上传失败");
 }
})

JavaScript实现图片上传并预览并提交ajax

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
js实现异步循环实现代码
Feb 16 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
浅探express路由和中间件的实现
Sep 30 #Javascript
JavaScript实现单图片上传并预览功能
Sep 30 #Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 #Javascript
laravel实现中文和英语互相切换的例子
Sep 30 #Javascript
JavaScript键盘事件响应顺序详解
Sep 30 #Javascript
vue自动化路由的实现代码
Sep 30 #Javascript
js实现图片上传即时显示效果
Sep 30 #Javascript
You might like
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php获取apk包信息的方法
2014/08/15 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
微信支付开发告警通知实例
2016/07/12 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
python fabric使用笔记
2015/05/09 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
使用python爬取B站千万级数据
2018/06/08 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
灰雀教学反思
2014/04/28 职场文书
社区禁毒工作方案
2014/06/02 职场文书
四风自我剖析材料
2014/09/30 职场文书
个人融资协议书
2014/10/02 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python