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 相关文章推荐
Knockout visible绑定使用方法
Nov 15 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python3 中文文件读写方法
2018/01/23 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
精彩的推荐信范文
2013/11/26 职场文书
股东合作协议书范本
2014/04/14 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS