0

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

<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() 但这不起作用。但是，如果我添加一个警报（'something'），所有图像都会显示没有任何问题。有没有办法可以延迟执行以便加载所有图像。我也试过 setTimeout() 没有任何运气。谢谢你的帮助

4

3 回答 3

0

尝试将<script>标签放在结束标签之前</body>

于 2013-08-18T12:13:53.263 回答
0

If you properly indent your code, you will set that $("#files).change(/*..*/) line is not inside the submit_rr function.

Wrap all your code with

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

Basically what it does is, creating event handler on dom ready event and after that we are executing our script.

Also, this is a commonly asked question. If you believe the problem you are having is not unique to your case, do your research, if you still cannot find the answer, go ahead and ask.
The link at http://whathaveyoutried.com tells about developers' feelings on answering a repeatedly asked question.

于 2013-08-18T11:52:19.257 回答
0

您好 搜索后.....

我发现这行得通...

功能 eecute（事件）{

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

   }
于 2013-08-21T12:09:46.020 回答