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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
JavaScript 继承使用分析
May 12 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
javascript实现图片轮换动作方法
Aug 07 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
基于canvas实现手写签名(vue)
2020/05/21 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
wxPython学习之主框架实例
2014/09/28 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
露营世界:Camping World
2017/02/02 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
高三历史教学反思
2014/01/09 职场文书
司仪主持词两篇
2014/03/22 职场文书
2014年新生军训方案
2014/05/01 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
公司介绍信范文
2015/01/31 职场文书
海底两万里读书笔记
2015/06/26 职场文书