如何在多次浏览中显示图像

How to show image on multiple browse

本文关键字:显示 显示图 图像 浏览      更新时间:2023-09-26

我的任务是我已经添加了多个浏览文件点击添加更多的按钮在同一时间我必须查看文件后,我已经使用下面的代码,我已经成功地浏览文件在一个浏览框,但我无法同时查看所有的图像。我不知道该怎么做

my check.html file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="custom.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<div class="file_wrapper" id="file_wrapper">
<div>
 <span class="btn btn-default btn-file"><i class="fa fa-upload"></i>                                            
     Select Image<input id="fileupload" class="fileupload" type="file" name="userFiles[]"   required/>
 </span> &nbsp;&nbsp;
 <span class="btn btn-success">
     <a href="javascript:void(0);" class="add_image" title="Add field">
<span class="glyphicon glyphicon-plus" >Add more</span>
     </a>
</span>
</div>
 </div>                                                 
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>
我的第二个custom.js文件是
      // Add More field script
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_image'); //Add button selector
    var wrapper = $('.file_wrapper'); //Input field wrapper
    var fieldHTML = '<div><span class="btn btn-default btn-file"><i class="fa fa-upload"></i>Select Image<input id="fileupload" class="fileupload" type="file" name="userFiles[]"  required/></span> &nbsp;&nbsp;<a href="javascript:void(0);" class="remove_button" title="Remove field"><span class="btn btn-success"><span class="glyphicon glyphicon-minus">Remove</span></span></a></div>';
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});


$(function () {
    // View Image on Browse Script
    $(".fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#dvPreview");
            dvPreview.html("");
            var regex = /^([a-zA-Z0-9's_''.'-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height:200px;width: 300px");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});

请帮帮我

每次选择新图像时都要删除之前的图像,因此删除第一个dvPreview.html("");

      // Add More field script
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_image'); //Add button selector
    var wrapper = $('.file_wrapper'); //Input field wrapper
    var fieldHTML = '<div><span class="btn btn-default btn-file"><i class="fa fa-upload"></i>Select Image<input id="fileupload" class="fileupload" type="file" name="userFiles[]"  required/></span> &nbsp;&nbsp;<a href="javascript:void(0);" class="remove_button" title="Remove field"><span class="btn btn-success"><span class="glyphicon glyphicon-minus">Remove</span></span></a></div>';
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});


$(function () {
    // View Image on Browse Script
    $(".fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#dvPreview");
            //dvPreview.html("");
            var regex = /^([a-zA-Z0-9's_''.'-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height:200px;width: 300px");
                        img.attr("src", e.target.result);
                        dvPreview.append(img);
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    //dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});