上传多张图片预览

Question

我正在使用这个来源：http://opoloo.github.io/jquery_upload_preview/ 到现在为止，我可以上传一张带预览的图片。

<style type="text/css">
.image-preview {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #000000;
  color: #ecf0f1;
}
input[type="file"] {
    line-height: 200px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
}
  label {
    position: absolute;
    z-index: 5;
    opacity: 0.7;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
  }

</style>

<script type="text/javascript">
$(document).ready(function() {

    $("image-preview").each(
        function(){
                $.uploadPreview({
                    input_field: $(this).find(".image-upload"),
                    preview_box: this,
                    label_field: $(this).find(".image-label")
                });
        }
    );
});
</script>
<!--| catatan penting: yang penting action="" & input type="file" name="image" |-->
<form action="upload.php" method="POST" enctype="multipart/form-data">
    <div class="image-preview">
        <label for="image-upload" class="image-label">+ GAMBAR</label>
        <input type="file" name="my_field[]" class="image-upload" />
    </div>
    <div class="image-preview">
        <label for="image-upload" class="image-label">+ GAMBAR</label>
        <input type="file" name="my_field[]" class="image-upload" />
    </div>
    <input type="submit"/>
</form>

然后尝试添加更多 div 类图像预览，我想添加另一个带有图像预览的按钮。 我不想一键多次上传。

$(document).ready(function() {$.uploadPreview => 使用id，当然当改成class并添加更多div时，上传一个按钮时，另一个按钮会改变。我对逻辑感到困惑。任何人都可以帮忙吗？也许使用数组，但我不知道如何..

Answer 1

由于上传按钮依赖于 uploadPreview 的状态，您需要分别为每个 div 初始化以获得单独的上传按钮。 像这样改变你的 html 给每个容器一个类说 imgBox

<div class="imgBox">
 <label for="image-upload" class="image-label">Choose File</label>
 <input type="file" name="image" class="image-upload" />
</div>
.....
....
...
<div class="imgBox">
 <label for="image-upload" class="image-label">Choose File</label>
 <input type="file" name="image" class="image-upload" />
</div>

.. 现在使用 jquery each() 初始化每一个

 $(".imgBox").each(
            function(){
                $.uploadPreview({
                input_field: $(this).find(".image-upload"),
                preview_box: this,
                label_field: $(this).find(".image-label")
            });
});

Answer 2

我创建了一个简单的图片上传 index.html 文件，用于图片上传和预览。

需要 j-query。不需要额外的插件。 如果你有任何问题可以问我;)

//预览图片只需要这几行代码

var imageId=idOfClicked;
var output = document.getElementById(imageId);
output.src = URL.createObjectURL(event.target.files[0]);

在这里查看：

https://jsfiddle.net/chs3s0jk/6/

Answer 3

我有一个更好的文件上传选项，它很容易使用，你可以试试。

window.onload = function(){   
    if(window.File && window.FileList && window.FileReader){
        $(document).on("change",'.file', function(event) {
            var files = event.target.files; //FileList object
            var output = document.getElementById("upload-preview");
            $("#upload-preview").html("");
            if(files.length>5){
                $(".file").after("<div class='alert alert-error'><span class='close'></span>Maximum 5 files can be uploaded.</div>");
                $(this).val("");
                return false;
            }
            else{
                $(".file").next(".alert").remove();
            }
            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];
                //Only pics 
                // if(!file.type.match('image'))
                if(file.type.match('image.*')){
                    if(this.files[0].size < 2097152){    
                  // continue;
                    var picReader = new FileReader();
                    picReader.addEventListener("load",function(event){
                        var picFile = event.target;
                        var div = document.createElement("div");
                        div.className = "upload-preview-thumb";
                        div.style.backgroundImage = 'url('+picFile.result+')';
                        output.insertBefore(div,null);            
                    });
                    //Read the image
                    $('#clear, #upload-preview').show();
                    picReader.readAsDataURL(file);
                    }else{
                        alert("Image Size is too big. Minimum size is 1MB.");
                        $(this).val("");
                    }
                }else{
                alert("You can only upload image file.");
                $(this).val("");
            }
            }
        });
        $(".file2").change(function(event){
            var err=0;
            var input = $(event.currentTarget);
            var ele = $(this);
            var file = input[0].files[0];
            var u = URL.createObjectURL(this.files[0]);

            var w = ele.attr("data-width");
            var h = ele.attr("data-height");
            var img = new Image;

            img.onload = function(){
                if(w){
                    if(img.width!=w || img.height!=h){
                        ele.parent().find(".alert").remove();
                        ele.parent().find(".upload-preview").before("<div class='alert alert-error'>Please upload a image with specified dimensions.</div>");
                        ele.val("");
                    }
                    else{
                        ele.parent().find(".alert").remove();
                    }
                }
            };

            img.src = u;

            var nh;
            if($(this).attr('data-preview')=='full')
                nh = (h/w*150)
            else
                nh=150

            var preview = ele.parent().find(".upload-preview");
            var reader = new FileReader();
            preview.show();
            reader.onload = function(e){
                image_base64 = e.target.result;
                preview.html("<div class='upload-preview-thumb' style='height:"+nh+"px;background-image:url("+image_base64+")'/><div>");
            };
            reader.readAsDataURL(file);
        });

    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

以上代码另存为一个js文件，如file-upload.js 然后将其链接到您想要查看的文件。 即

<script src="js/file-upload.js" type="text/javascript"></script>

使用这种示例作为输入类型

<input type="file" class="file2" name="page-image" id="page-image"/>

适用于名称为“file2”的类，您为能够创建预览的输入字段提供的类。

完整的结构如下所示。

您可以尝试的 HTML 代码

<input type="file" class="file2" name="page-image[]" id="page-image"/>
<div class="clearfix"></div>
<div class="upload-preview" style="display: block;">
    <div class="upload-preview-thumb">
    // perview genereate here
    // you can display image also here if uploaded throw the php condition in edit image part
    </div>
</div>
<input type="file" class="file2" name="page-image[]" id="page-image"/>
<div class="clearfix"></div>
<div class="upload-preview" style="display: block;">
    <div class="upload-preview-thumb">
    // perview genereate here
    // you can display image also here if uploaded throw the php condition in edit image part
    </div>
</div>

CSS

.upload-preview {
  border: 1px dashed #ccc;
  display: block;
  float: left;
  margin-top: 10px;
  padding: 5px;
}
.upload-preview-thumb {
  background-position: 50% 25%;
  background-size: cover;
  float: left;
  margin: 5px;
  position: relative;
  width: 139px;
}

希望这可行，并且将来对您有所帮助。

谢谢。