想要做一个多图上传预览的功能,目前只实现了单图上传预览删除,在原基础上修改不知从何入手,大牛们帮忙看看。
html:
<div class="form-group">
<div class="col-sm-2 control-label">图片预览</div>
<div class="col-sm-10">
<img src="" id="img" width="100px" height="100px">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">图片上传</div>
<div class="col-sm-10">
<input id="photoCover" class="form-control" readonly type="text">
<label class="input-group-btn">
<input id="file" type="file" name="file" multiple="multiple" style="left: -9999px; position: absolute;">
<span class="btn btn-default">选择图片</span>
</label>
</div>
</div>
js部分
//图片预览
$(function () {
$("#file").change(function (e) {
var file = e.target.files[0];
$('#photoCover').val(document.getElementById("file").files[0].name);
if (file) {
var reader = new FileReader();
reader.onload = function () {
$("img").attr("src", this.result);
}
reader.readAsDataURL(file);
}
});
})
//表单保存
savefunction (event) {var url = "network/server/update";
var networkServiceType = $("#networkServiceType").val().trim();
var networkServiceName = $("#networkServiceName").val().trim();
var networkServiceAdd = $("#networkServiceAdd").val().trim();
var networkServiceTel = $("#networkServiceTel").val().trim();
var networkServiceLongitude = $("#networkServiceLongitude").val().trim();
var networkServiceLatitude = $("#networkServiceLatitude").val().trim();
var file = document.getElementById("file").files[0];
var formData = new FormData();
formData.append('networkServiceType', networkServiceType);
formData.append('networkServiceName', networkServiceName);
formData.append('networkServiceAdd', networkServiceAdd);
formData.append('networkServiceTel',networkServiceTel);
formData.append('networkServiceLongitude',networkServiceLongitude);
formData.append('networkServiceLatitude',networkServiceLatitude);
formData.append('file', file);
$.ajax({
type: "POST",
url: projectname + url,
data: formData,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function (data) {
if(data.code ===0){
alert('操作成功', function(index){
vm.reload();
});
}else{
alert(data.msg);
}
}
});
},