// single upload photos
html：
<div class="azwoo"></div>
<div class="azwot">
<input type="file" name="" class="fileinput13" data-id="9" multiple="multiple">
<Span> Select an image </ span>
</div>
JS code:
Explanation: We look at the background of this line of code, HTML5 support multiple attributes, namely <input type = "file"> may add multiple attributes and assignment: multiple = "multiple",
That is, <input type = "file" multiple = "multiple">, this one-time upload multiple images at the same time, so to get a picture of the way is: $ ( 'xx') [0] .files [0]
$(" .fileinput13").change(function () {
var file = this.files[0];
readFile(file,$(this).parent().siblings(".azwoo"));
image_id=$(this).attr("data-id");
});
var on =document.querySelector(".azwoo");
// send the request to start
function readFile(file,element) {
// Create a new reader
var reader = new FileReader();
// Read the file type selection mode
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
reader.readAsDataURL(file);
break;
};
// When the method is executed after the end of the file read
reader.addEventListener('load',function () {
// If we say let's read the documents show, then still you need to create different types of files by label
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
var img = document.createElement('img');
img.src = reader.result;
console.log(image_id+img.src);
element.append(img);
element.show();
$.ajax({
type:"post",
url:"http://192.168.0.171:8080/WSHD/jiekou7/ADImage",
dataType:"json",
data:{
image:img.src,
style:4,
id:image_id
},
success:function(res){
console.log ( "upload success !!!!!!!!!");
}
}); // End Request
break;
}
});
}; // readFile function terminates