学习一下思路，上传部分可以用vue对象方法和axios代替

图片上传并预览

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" onchange="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) {//判断是否支持FileReaderif(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) {//获取图片domvar 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("上传失败");}
})

---------------------
作者：猫老板的豆
来源：CSDN
原文：https://blog.csdn.net/x550392236/article/details/76690927
版权声明：本文为博主原创文章，转载请附上博文链接！

JavaScript实现图片上传并预览并提交相关推荐

用JavaScript实现图片上传并预览
一.前端界面是通过jqgrid展示的 jqgrid是典型的B/C架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示. jqGrid是用ajax实现对请求和响应的处理,支持局部 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...

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

图片上传并预览

HTML

css

JS

JavaScript实现图片上传并预览并提交相关推荐

最新文章

热门文章