手动触发按钮，ajax返回uptoken后第一次上传需要双击上传按钮才能选择文件上传

Question

需求是上传userId到后台，根据Id生成uptoken，于是写了一个ajax提交id
现在uptoken能正常取到上传到七牛了，但是存在一个问题：上传按钮第一次需要双击才能弹出选择文件框，但是双击后取消在选择的话 就不需要双击了。
而且如果在选择文件的时候点击了取消的话 下次再点会多弹出一次选择框。

上传按钮代码：

    <div id="container1">
        <div id="picText" style="float:left; margin-right:20px;">图片上传:</div>
            <input type="button" class="btn btn-default btn-lg" id="picUp" href="#" onclick = "upPic()" value="选择图片">
    </div> 

上传js代码：

function upPic(){
    jQuery.ajax({
     url: "./picToken",
     data: {
             "userId":${(userId)}
     },
     type:'POST',
           success:function(data){    

            var obj = JSON.parse(data); 
            upToken = obj.uptoken;

            var uploaderPic = Qiniu.uploader({
                runtimes: 'html5,flash,html4',  //上传模式,依次退化
                browse_button: 'picUp',     //上传选择的点选按钮，**必需**
                container: 'container',     
                save_key: true,
                drop_element: 'container',
                max_file_size: '100mb',
                flash_swf_url: 'http://jssdk.demo.qiniu.io/js/plupload/Moxie.s7wf', //引入flash,相对路径
                dragdrop: false,                    //开启可拖曳上传
                chunk_size: '4mb',              //分块上传时，每片的体积
                domain: 'http://7u2fe1.com2.z0.glb.qiniucdn.com/',//bucket 域名，下载资源时用到，**必需**
                uptoken : upToken,

                filters: {
                  mime_types : [ //只允许上传图片文件
                    { title : "图片文件", extensions : "jpg,gif,png,bmp" }, 
                  ],
                  prevent_duplicates : true //不允许队列中存在重复文件
                },
                auto_start: false,
                init: {
                    'FilesAdded': function(up, files) {
                        var count=uploaderPic.files.length; 
                        if(count>1){ 
                         alert("最多只能上传一张图片,请重新选择"); 
                         uploaderPic.files.length = 0;
                         return;
                        }else{ 
                         uploaderPic.start(); 
                        } 

                        $('table').show();
                        $('#success').hide();
                        plupload.each(files, function(file) {
                             // 文件添加进队列后,处理相关的事情
                            var progress = new FileProgress(file, 'fsUploadProgress');
                            progress.setStatus("等待...");
                        });
                    },
                    'BeforeUpload': function(up, file) {
                        // 每个文件上传前,处理相关的事情
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                        if (up.runtime === 'html5' && chunk_size) {
                            progress.setChunkProgess(chunk_size);
                        }

                        document.getElementById("picUp").style.display="none";
                        document.getElementById("picText").innerHTML = "图片正在上传...";
                    },
                    'UploadProgress': function(up, file) {
                        // 每个文件上传时,处理相关的事情
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                        progress.setProgress(file.percent + "%", up.total.bytesPerSec, chunk_size);
                    },
                    'UploadComplete': function() {
                        //队列文件处理完毕后,处理相关的事情
                        $('#success').show();
                    },
                    'FileUploaded': function(up, file, info) {
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        progress.setComplete(up, info);

                        var res = $.parseJSON(info);
                        picKey = res.key;   

                        //上传图片成功后隐藏按钮
        //                document.getElementById("picUp").style.display="none";
                        document.getElementById("picText").innerHTML = "图片上传成功...";
                    },
                    'Error': function(up, err, errTip) {
                        //上传出错时,处理相关的事情
                        $('table').show();
                        var progress = new FileProgress(err.file, 'fsUploadProgress');
                        progress.setError();
                        progress.setStatus(errTip);
                        document.getElementById("picText").innerHTML = "图片上传失败...";
                    }
                }
            });
        }  
    })
}

Answer 1

html:

        <div id="container1">
            <div id="picText" style="float:left; margin-right:20px;">图片上传:</div>
                <input type="button" class="btn btn-default btn-lg" id="picUp" href="#" onclick = "upPic()" value="选择图片">
        </div>   

js:

<script type="text/javascript" src="${basePath}/resources/upload/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/upload/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/upload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/upload/js/zh_CN.js"></script>
<script type="text/javascript" src="${basePath}/resources/upload/js/ui.js"></script>
<script type="text/javascript" src="${basePath}/resources/upload/js/qiniu.js"></script>
<script type="text/javascript" src="${basePath}/resources/upload/js/highlight.js"></script>

<script type="text/javascript">
    var picKey = picKey;
    var videoKey = videoKey;
function upPic(){

    jQuery.ajax({
     url: "./picToken",
     data: {
                "userId":${(userId)!-10}
     },
     type:'POST',
           success:function(data){    
              
            var obj = JSON.parse(data);    
            upToken = obj.uptoken;
            
            var uploaderPic = Qiniu.uploader({
                runtimes: 'html5,flash,html4',    //上传模式,依次退化
                browse_button: 'picUp',        //上传选择的点选按钮，**必需**
                container: 'container',        
                save_key: true,
                drop_element: 'container',
                  max_file_size: '100mb',
                flash_swf_url: 'http://jssdk.demo.qiniu.io/js/plupload/Moxie.s7wf', //引入flash,相对路径
                dragdrop: false,                    //开启可拖曳上传
                chunk_size: '4mb',              //分块上传时，每片的体积
                domain: 'http://7u2fe1.com2.z0.glb.qiniucdn.com/',//bucket 域名，下载资源时用到，**必需**
                uptoken : upToken,
        
                filters: {
                  mime_types : [ //只允许上传图片文件
                    { title : "图片文件", extensions : "jpg,gif,png,bmp" }, 
                  ],
                  prevent_duplicates : true //不允许队列中存在重复文件

                },
                auto_start: false,
                init: {
                    'FilesAdded': function(up, files) {
                        var count=uploaderPic.files.length; 
                        if(count>1){ 
                         alert("最多只能上传一张图片,请重新选择"); 
                         uploaderPic.files.length = 0;
                         return;
                        }else{ 
                         uploaderPic.start(); 
                        } 
                        
                        $('table').show();
                        $('#success').hide();
                        plupload.each(files, function(file) {
                             // 文件添加进队列后,处理相关的事情
                            var progress = new FileProgress(file, 'fsUploadProgress');
                            progress.setStatus("等待...");
                        });
                    },
                    'BeforeUpload': function(up, file) {
                        // 每个文件上传前,处理相关的事情
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                        if (up.runtime === 'html5' && chunk_size) {
                            progress.setChunkProgess(chunk_size);
                        }
                        
                        document.getElementById("picUp").style.display="none";
                        document.getElementById("picText").innerHTML = "图片正在上传...";
                    },
                    'UploadProgress': function(up, file) {
                        // 每个文件上传时,处理相关的事情
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                        progress.setProgress(file.percent + "%", up.total.bytesPerSec, chunk_size);
                    },
                    'UploadComplete': function() {
                        //队列文件处理完毕后,处理相关的事情
                        $('#success').show();
                    },
                    'FileUploaded': function(up, file, info) {
                        var progress = new FileProgress(file, 'fsUploadProgress');
                        progress.setComplete(up, info);
                        
                        var res = $.parseJSON(info);
                        picKey = res.key;   
                        
                        //上传图片成功后隐藏按钮
        //                document.getElementById("picUp").style.display="none";
                        document.getElementById("picText").innerHTML = "图片上传成功...";
                    },
                    'Error': function(up, err, errTip) {
                        //上传出错时,处理相关的事情
                        $('table').show();
                        var progress = new FileProgress(err.file, 'fsUploadProgress');
                        progress.setError();
                        progress.setStatus(errTip);
                        document.getElementById("picText").innerHTML = "图片上传失败...";
                    }
                }
            });
        }  
    })
}
</script>