I have a program to upload multiple images to server. I am trying to preview the selected images before upload So that I could delete the unwanted image if necessary. I am stuck with the previewing part. Please help.
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Image</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="files[]" id="fileToUpload" onChange="readURL(this)" multiple
accept="image/*" />
<input type="submit" value="Upload Image" name="submit">
<img id="preview2" src="#" alt="your image" width="100" height="100" />
<img id="preview" src="#" alt="your image" width="100" height="100" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('preview').src=e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
php
<?php
$valid_formats = array("jpg", "png", "gif");
$max_file_size = 1024*720; //100 kb
$path = "gallery/"; // Upload directory
$count = 0;
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
// Loop $_FILES to exeicute all files
foreach ($_FILES['files']['name'] as $f => $name) {
if ($_FILES['files']['error'][$f] == 4) {
continue; // Skip file if any error found
}
else{ // No error found! Move uploaded files
if(move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name))
$count++; // Number of successfully uploaded file
}
}
}
?>
Try some thing similer to this
JS
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#test').attr('src', e.target.result);
//$("#test").css("display", "block");
$('#test').css({"display":"block","float":"right" });
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Html
<div style="width:350px;">
<form id="form1" enctype="multipart/form-data">
<input onchange="readURL(this);" type="file" />
<img alt="Image Display Here" id="test" src="#" height="100px" width="100px" />
</form>
</div>
Css
<style>
#test { display:none; }
</style>
Note: TESTED
Assuming you do have html input array , so why are you working over id .. even you are passing the reference of element
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).attr(src,e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Use this code Its working for multiple upload, Download jquery-1.10.2.min.js and replace this path(xxxxx Your path to access JQUERY xxxxxxxxxxx/) to your actual path. (Its working)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Image</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="files[]" id="fileToUpload" onChange="readURL(this)" multiple
accept="image/*" />
<input type="submit" value="Upload Image" name="submit">
<div class="preview-area"></div>
</form>
<script type="text/javascript" src="xxxxx Your path to access JQUERY xxxxxxxxxxx/jquery-1.10.2.min.js"></script>
<script>
var inputLocalFont = document.getElementById("fileToUpload");
inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input
function previewImages(){
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for(var i = 0; i < fileList.length; i++){
//get a blob to play with
var objectUrl = anyWindow.createObjectURL(fileList[i]);
// for the next line to work, you need something class="preview-area" in your html
$('.preview-area').append('<img src="' + objectUrl + '" width="100" height="100"/>');
// get rid of the blob
window.URL.revokeObjectURL(fileList[i]);
}
}
</script>
</body>
</html>
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.