Question

我的任务是我添加了多个浏览文件点击添加更多按钮同时我还要查看文件后浏览文件我已经使用下面的代码我已经成功浏览文件一次浏览框，但我无法同时查看所有图像。我没有得到如何做到这一点

我的check.html文件

<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.");
        }
    });
});

请帮帮我在此先感谢

Answer 1

每次选择新图片时都会移除上一张图片，因此请先删除// 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>   <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."); } }); });

System.OutOfMemoryException

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

1 个答案: