深圳市宝安区福永高名塑胶模具制品厂

今天小编跟大家讲解下有关js图片上传和预览 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关js图片上传和预览 的相关资料，希望小伙伴们看了有所帮助。

一.css代码

给<input>标签的父级设置一个‘+’背景图，把<input type=file>的宽高设置得跟父级一样，且完全透明，这样点击的时候看似是点击的‘+’的节点，其实点击的是<input>节点。

.file-box { position: relative; display: inline-block; width:100px; height:100px; background:url('images/uploadPc.png')no-repeat; background-size:100px 100px;}#input_file{ width:100%; height:100%; opacity: 0; filter:alpha(opacity=0);}

二.html代码<div> <input type="file"value=""name="file"id ="input_file"accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"οnchange="imgPreview(this,0)"></div>

三.js代码

这个方法是给$("#input_file")这个对象设置图片的值并回显图片

function imgPreview(fileDom,i) { var reader = new FileReader(); var file = fileDom.files[0]; var imageType = /^image\//; if(!imageType.test(file.type)) { alert("请选择图片！"); return; } reader.readAsDataURL(file); reader.onload = function(e) { console.log(document.getElementsByClassName('file-box')); $('.file-box').css({"background":"url("+this.result+") no-repeat","backgroundSize":"200px 160px"});//回显 };}

上传部分的代码：

var formData = new FormData();formData.append('photo', $('#input_file')[0].files[0]);$.ajax({ type:"post", url:"uploadaddress", data: formdata, dataType: 'json', processdata: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 xhrFields:{withCredentials:true}, async: true, success: function (data) { callback(data); } });

来源：爱蒂网