want to do a multi-image upload preview function, currently only achieve a single image upload preview deletion, modify on the original basis do not know where to start, Daniel help take a look.
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 part
/ / Picture Preview
$(function () {
$("-sharpfile").change(function (e) {
var file = e.target.files[0];
$("-sharpphotoCover").val(document.getElementById("file").files[0].name);
if (file) {
var reader = new FileReader();
reader.onload = function () {
$("img").attr("src", this.result);
}
reader.readAsDataURL(file);
}
});
})
/ / form Save
savefunction (event) {var url = "network/server/update";
var networkServiceType = $("-sharpnetworkServiceType").val().trim();
var networkServiceName = $("-sharpnetworkServiceName").val().trim();
var networkServiceAdd = $("-sharpnetworkServiceAdd").val().trim();
var networkServiceTel = $("-sharpnetworkServiceTel").val().trim();
var networkServiceLongitude = $("-sharpnetworkServiceLongitude").val().trim();
var networkServiceLatitude = $("-sharpnetworkServiceLatitude").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);
}
}
});
},