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操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
浅探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
动态生成gif格式的图像要注意?
2006/10/09 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
javascript轮播图算法
2016/10/21 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python实现浪漫的烟花秀
2019/01/30 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python 处理文件的几种方式
2019/08/23 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
工程概预算专业毕业生求职信
2013/10/04 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
校友回访母校寄语
2015/02/26 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android