上传预览图片自己做的.md
1.无插件预览(window.URL.createObjectURL)
```javascript
//demo 图片预览 单个
$(".demo input#demo_file").on("change",function(){
var val_1 = $(this).val();
var valImg = window.URL.createObjectURL(document.getElementById("demo_file").files[0]);//成功预览该图片
$(".demo div img").attr("src",valImg);
});
2.多个预览 上传
//得支持同时上传多个
$(".imgButton_w").on("click",function(){
console.log(1);
var $input = "<input type='file' id='img_' name='file' class='files'>";
$("#input_files").append($input);
$("#input_files input:last-child").trigger("click").siblings().removeAttr("id");
});
var imgArr = [];
function addFunc(){
var val_ = $("#input_files input:last-child").val();
var newVal = val_.split(".");
var reg_ = /^(jpg|png|jpeg|gif)$/;
if(val_!==''&&!reg_.test(newVal[newVal.length-1])) {
alert("请上传后缀为jpg、png、jpeg、gif的图片!");
return false;
}
var valImg = window.URL.createObjectURL(document.getElementById("img_").files[0]);//成功预览该图片
imgArr.push(valImg);
var $html = '<div class="upload_append_list"><p>' +
'<a href="javascript:" class="upload_delete delete" title="删除" data-index="">删除</a><br />' +
'<img id="uploadImage_" src="' + valImg + '" class="upload_image" /></p>' +
'<span id="img" class="upload_progress"></span>' +
'</div>';
$("#preview").append($html);
}
//创建数组存储图片信息 最多9张图,
function max_nine(){
var length_ = $(".show_img > div").size();
console.log("length_:"+length_);
if(length_ >=9){
alert("最多只能上传9张图!");
}else{
addFunc();
}
}
$(".upload_img ").on("click",function(){
max_nine();
});
//移除预览但未上传给后台的图片
$(document).on("click","#preview p a.delete",function() {
var i = $(this).parent().parent().index();
$("#input_files input").eq(i).remove();
$(this).parent().parent().remove();//alert("删除预览");
});
function uploadFunc(){
$("#imgForm").ajaxSubmit({
type: "post",
url: "/investManage/financing/addImg.do",
data: {"projectId":localStorage.projectId},
dataType: "json",
success: function (obj) {
if (obj.login && obj.status == 1) {
//alert("上传图片成功!");
} else if (obj.login == false) {
alert(obj.msg);
window.location.href = "login.html";
} else {
alert(obj.msg);
}
},
error: function () {
alert("服务器错误,上传图片失败!");
}
});
}
```