上传多张图片预览

Posted 2023-02-25

【中文标题】上传多张图片预览

【英文标题】：upload with multiple image preview

【发布时间】：2016-09-07 04:29:15

【问题描述】：

我正在使用这个来源：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时，上传一个按钮时，另一个按钮会改变。我对逻辑感到困惑。任何人都可以帮忙吗？也许使用数组，但我不知道如何..

【参考方案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")
            );
);

【讨论】：

我试了一下还是不行。你可以看看我上面的代码，我编辑它。

【参考方案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/

【讨论】：

我喜欢那个代码。但在我的代码中，我结合了文件：class.upload.php 通常使用：表单操作和名称：输入类型 =“文件”。在您的代码中，我只看 1 它没有名称。如何获取文件上传和处理到存储

【参考方案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;

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

谢谢。

【讨论】：

应该输入什么：//在这里生成查看//如果上传，您也可以在此处显示图像在编辑图像部分抛出 php 条件它不显示自定义上传按钮。

现在什么都没有。有额外的东西。如果您插入图像。但是当您使用同一页面进行编辑时，如果您找到旧数据，则可以将图像标记放在那里，然后将该图像填充到图像标记中，其他明智的图像标记不会显示类似的内容。

尝试类文件而不是文件2。并确保 jquery 核心文件附件。

在输入类型之后添加您的图像预览 html。