Как просмотреть несколько изображений перед загрузкой на сервер?

У меня есть программа для загрузки нескольких изображений на сервер. Я пытаюсь просмотреть выбранные изображения перед загрузкой. Чтобы я мог удалить ненужное изображение, если это необходимо. Я застрял с частью предварительного просмотра. Пожалуйста помоги.Как просмотреть несколько изображений перед загрузкой на сервер?

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 
      } 
     } 
    } 
?>

источник

2015-09-29 Arjun

возможно дубликат [предварительного просмотра изображения перед загрузкой] (http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – maxdaniel98

Вы можете увидеть эту ссылку, чтобы показать предварительный просмотр загрузки нескольких изображений с помощью java-скрипта http://stackoverflow.com/questions/13683579/how-to-provide-a-preview-for-multiple-images-selected-in-fileuplaod -using-jquery –

@ maxdaniel98 Мне нужно просмотреть несколько изображений. Не только изображение. Я могу просмотреть одно изображение. Но не могу иметь дело с многократным изображением. – Arjun

Попробуйте вещь similer этой

<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>

Примечание: ПРОВЕРЕНО

Js Fiddle Preview

источник

2015-09-29 06:35:18

На самом деле мне нужно загрузить несколько изображений и просмотреть его, и вам нужно будет очистить, если не нужно. – Arjun

Предполагая, йо у меня есть HTML массив ввода, так почему вы работаете над ид .. даже вы передаете ссылку на элемент

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]); 
    } 
}

источник

2015-09-29 06:37:49

Используйте этот код работает его для нескольких загрузки, Скачать JQuery-1.10.2.min .js и замените этот путь (xxxxx, ваш путь доступа к JQUERY xxxxxxxxxxx /) на ваш фактический путь. (Его рабочий)

<!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>

источник

2015-09-29 12:04:47

Как просмотреть несколько изображений перед загрузкой на сервер?

ответ

Смежные вопросы