<div class="dragdrop">
<input type="file" name="files[]" multiple="multiple" />
</div>
<div class="preview">
<src class="image-1" href="" alt="" />
<src class="image-2" href="" alt="" />
<src class="image-3" href="" alt="" />
???
</div>
I'm looking for a simple drag & drop, not to be too complicated.I do not know how you can preview images, after the addition.
Also, if you click on an image, it must be the top priority.
$priority = $_POST['image-2'];
Thanks!
PS: I check this, but no multiple: JSFIDDLE
Here is your solution:-
Make a test.php file and run this code. It will allow you to upload multiple files and you can preview them.
<html>
<head>
<title></title>
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input multiple="1" onchange="readURL(this);" id="uploadedImages" name="pictures[]" type="file">
<div id ="up_images"></div>
<script type="text/javascript">
var readURL = function(input) {
$('#up_images').empty();
var number = 0;
$.each(input.files, function(value) {
var reader = new FileReader();
reader.onload = function (e) {
var id = (new Date).getTime();
number++;
$('#up_images').prepend('<img id='+id+' src='+e.target.result+' width="100px" height="100px" data-index='+number+' onclick="removePreviewImage('+id+')"/>')
};
reader.readAsDataURL(input.files[value]);
});
}
</script>
</body>
</html>
Hope it will help you :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.