Question

我有一个程序可以将多个图像上传到服务器。我试图在上传之前预览所选图像，以便我可以在必要时删除不需要的图像。我被困在预览部分。请帮忙。

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

Answer 1

尝试使用similer来解决这个问题

JS

<script>
$(function() {
    $('#reload').on('click',function(){
        $("#masterdiv").find("div[id^='div']").each(function(index){

//First, remove and reattach classes “div1class”, “div2class” and “div3class” 
//from “easyDIV”, “mediumDIV” and “hardDIV” respectively:
            $(“#easyDIV”).removeClass('div1class');
            $(“#easyDIV”).addClass('div1class');
            $(“#mediumDIV”).removeClass('div2class');
            $(“#mediumDIV”).addClass('div2class');
            $(“#hardDIV”).removeClass('div3class');
            $(“#hardDIV”).addClass('div3class');


//Get a random number between 1 and 5, then attach it to “sample”, 
//so that the result will be either “sample1”, “sample2”, “sample3”, “sample4” or “sample5”, 
//call this variable “variablesample”:
    var num = Math.floor(Math.random() * 5 + 1); 
       variablesample = "sample" +num;

//Attach this randomised id to all three divs using “variablesample”:
           jQuery(this).prev("easyDIV").attr("id",variablesample);
           jQuery(this).prev("mediumDIV").attr("id",variablesample);
           jQuery(this).prev("hardDIV").attr("id",variablesample);

        });
        var p = $("#masterdiv").parent();
        var el = $("#masterdiv").detach();
        p.append(el);
    });
});
</script>

HTML

div1class

的CSS

div2class

注意：已测试

Js Fiddle Preview

Answer 2

假设你确实有html输入数组，那你为什么要使用id ...即使你传递了元素的引用

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

使用此代码它适用于多次上传，下载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>

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

3 个答案: