在上传到服务器之前如何预览多张图像？

Question

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

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

Answer 1

Try some thing similer to this 尝试一些类似的东西

JS 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 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 的CSS

<style>
    #test { display:none; }
</style>

Note: TESTED 注意：已测试

Js Fiddle Preview Js Fiddle预览

Answer 2

Assuming you do have html input array , so why are you working over id .. even you are passing the reference of element 假设您确实有html输入数组，那么为什么还要对id工作呢。即使您正在传递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]);
    }
}

Answer 3

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. 使用此代码可多次上传，下载jquery-1.10.2.min.js并将此路径（xxxxx访问JQUERY xxxxxxxxxxx /的路径）替换为实际路径。 (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>

在上传到服务器之前如何预览多张图像？

问题描述

3 个解决方案

解决方案1
0 2015-09-29 06:35:18

解决方案2
0 2015-09-29 06:37:49

解决方案3
0 2015-09-29 12:04:47

在上传到服务器之前如何预览多张图像？

问题描述

3 个解决方案

解决方案1 0 2015-09-29 06:35:18

解决方案2 0 2015-09-29 06:37:49

解决方案3 0 2015-09-29 12:04:47

解决方案1
0 2015-09-29 06:35:18

解决方案2
0 2015-09-29 06:37:49

解决方案3
0 2015-09-29 12:04:47