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 相关文章推荐
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
js自定义input文件上传样式
Oct 26 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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的类树(支持无限分类)
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php中socket的用法详解
2014/10/24 PHP
Web程序工作原理详解
2014/12/25 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php cli配置文件问题分析
2015/10/15 PHP
php+mysql实现无限级分类
2015/11/11 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
经贸专业毕业生求职信范文
2014/05/01 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
优质服务标语口号
2015/12/26 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android