页面input上传图片保存到本地并且展示图片
方法1:使用js方法进行图片展示,然后发送请求保存文件
1、点击上传文件按钮,触发点击事件
2、js文件,展示图片
3、文件上传,因为图片已经展示,只进行图片的上传。怕有些萌新不知道如何组合代码,将图片展示的代码也一起展示
<script>
// 为表单绑定异步上传的事件
function uploadPic(img1, obj) { // img1:img标签的id,点击事件传过来的值 obj:上传文件的input标签,点击事件传过来的this
var img11 = $("#" + img1); //获取img标签
var file = $(obj); //获取input文件上传input标签
var explore = /.jpg$|.gif$|.png$|.bmp$/; //设置文件格式
if (explore.exec(file.val()) == null) {
alert("图片格式不正确");
file.outerHTML = file.outerHTML;
return false;
}
var reader = new FileReader(); //新疆FileReader对象
reader.readAsDataURL(file.get(0).files[0]); //读取文件
// reader.onloadstart = function () { //展示图片开始前的函数
// alert("开始展示时间");
// }
reader.onload = function () { //展示文件函数,将路径赋值给img标签的src