Question

我的网站上有这个代码。此页面将多个图像文件作为输入，并在将它们上载到服务器之前显示它们。

<html>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<body>
    <header>
        <h1>File API - FileReader</h1>
    </header>

    <label for="files">Select multiple files: </label>

    <input id="files" type="file" multiple/>
    <div id='10' style=" width:100px; height:50px; background-color:#006633" onclick="submit_rr(event)">Click</div>
    <output id="result" />
</body>
<script language="javascript" type="text/javascript" >
    function submit_rr(event){
        $('#files').click();
    }   

    $("#files").change(function(){
        show_selected(this);
    });


    function show_selected(input){

        for(i = 0;i< input.files.length; i++) {
            var reader = new FileReader();
            reader.readAsDataURL(input.files[i]);
            reader.onload = function (e) {
                var img = new Image;
                img.onload = function() {           
                    if(img.width>=img.height){
                        ratio=img.height/img.width;
                        height=ratio*100;
                        height_rem=(100-height)/2;
                        var crt=document.createElement('div');
                        crt.id="main_some";
                        crt.className="ind_req_sty";

                        var Friend="Friend";
                        crt.innerHTML="<img id="+i+" width='100px' height='"+height+"px' src='"+e.target.result+"'/>";
                        document.getElementById('10').appendChild(crt);           
                    }else{
                        ratio=img.width/img.height;
                        width=ratio*100;
                        var crt=document.createElement('div');
                        crt.id='main_req';
                        crt.className="ind_req_sty";

                        crt.innerHTML="<img id="+i+" height='100px' width='"+width+"' src='" + e.target.result +"'/>";
                        document.getElementById('10').appendChild(crt);               
                    }
                }
                img.src=reader.result;
            }    
        }

    }   
</script>
</html>

问题是，此脚本在显示所有元素之前执行。因此，仅显示少量图像（例如，选择10个中的4个）。我尝试添加.ready（）和.load（）但这不起作用。但是，如果我添加警报（'某事'），所有图像都会显示没有任何问题。有没有办法延迟执行，以便加载所有图像。我也试过没有运气的setTimeout（）。谢谢你的帮助

Answer 1

如果您正确缩进代码，则会设置$("#files).change(/*..*/)行不在submit_rr函数内。

用

包裹所有代码

$(function () {
    /* your code here */
});

基本上它的作用是，在dom ready事件上创建事件处理程序，然后我们执行我们的脚本。

此外，这是一个常见问题。如果你认为你所遇到的问题不是你的案例所独有的，那么你做研究，如果你仍然找不到答案，请继续问。 http://whathaveyoutried.com的链接讲述了开发人员回答重复提问的感受。

Answer 2

尝试将<script>代码放在结束</body>代码

之前

Answer 3

嗨搜索后.....

我发现这有效......

function eecute（event）{

     var files = event.target.files; //FileList object
        var output = document.getElementById("result");

        for(var i = 0; i< files.length; i++)
        {
            var file = files[i];

            //Only pics
            if(!file.type.match('image'))
              continue;

            var upload_pic = new FileReader();

            upload_pic.addEventListener("load",function(event){

                var pic_u = event.target;
                 var img = new Image;

                img.src=pic_u.result;
            if(img.width>=img.height){
                var div = document.createElement("cover");
                  div.innerHTML= "<div style='text-align: center; margin-top:8px; width:150px;margin-right:5px; height:150px;float:left'><img style='display:inline-block;' width='150' src='" + pic_u.result + "'/></div>"; 

                output.insertBefore(div,null); 

                }else{
                var div = document.createElement("cover");
                 div.innerHTML="<div style='text-align: center ;margin-top:8px;width:150px; margin-right:5px; height:150px;float:left'><img style='display:inline-block; margin:auto;' src='" + pic_u.result + "'height='150' /></div>";    
                     output.insertBefore(div,null); 
                    }


            });

             //Read the image
            upload_pic.readAsDataURL(file);
        }                               

   }

Javascript代码在所有元素准备好之前执行

3 个答案: