Question

我是上传者的新手。我想实现拖放上传过程。我曾尝试并能够在服务器目录上传文件，但我无法显示拖动文件在文件上传时，http://fineuploader.com/demos.html等用户控制台上的剩余文件正在提供。

我有共享示例代码，我用来上传文件：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fine Uploader Demo Page</title>
<link href="fineuploader-4.4.0/custom.fineuploader-4.4.0.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Fine Uploader Demo Page</h1>
<label class="control-label">Hold CTRL to click / select multiple images</label>
<br />
<br />
<!-- The element where Fine Uploader will exist. -->
<div id="fine-uploader"> </div>

<div id="outputImage"></div>
<br />

<!-- jQuery version 1.10.x (if you are using the jQuery plugin --> 
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> 
<!-- Fine Uploader-jQuery --> 
<script src="fineuploader-4.4.0/custom.fineuploader-4.4.0.min.js" type="text/javascript"></script> 
<script>
      $(document).ready(function () {


        $('#fine-uploader').fineUploader({
        /*  debug: true,*/
        autoUpload: true,
         scaling: {
                sizes: [
                    {name: "small", maxSize: 50},
                    {name: "medium", maxSize: 200}
                ]
            },
        request: {
            endpoint: 'Cfm/fineUploader.cfm?cfc=ImageDemo&functionName=Uploader'
          },
           validation: {
            allowedExtensions: ['jpeg','jpg','png', 'gif'],
           },
          text: {
            uploadButton: 'Choose File'
          }
        })
        .on('progress', function(event,id,name,uploadedBytes,totalBytes) {
            //alert('Name-'+name+"uploadedBytes-" +uploadedBytes+"totalBytes-"+totalBytes);


        })
        .on('error', function(event, id, name, reason, responseJSON) 
        {
            alert('There was an error with the upload. responseJSON.RETURNID'+reason);
        })

          .on('complete', function(event, id, name, responseJSON){


             if (responseJSON.success) 
             {
                if(responseJSON.HASERRORS == true)
                {
                    $('.qq-upload-success').hide();
                    alert(responseJSON.DATA.RETURNOUTPUT);  
                }
                else
                {
                    $('.qq-upload-success').hide();
                //  alert(responseJSON.RETURNID);
                //  $('#outputImage').append('<img src="images/' + responseJSON.RETURNID + '" /><br />');
                $('#outputImage').append('<div>' + responseJSON.RETURNID + '"</div><br />');
                }
             }
          })

      });   
    </script> 
<script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area">
                <span>Drop files here to upload (JPG, GIF, or PNG only)</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                  <div class="qq-progress-bar-container-selector">
                      <div class="qq-progress-bar-selector qq-progress-bar"></div>
                  </div>
                  <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                  <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                  <span class="qq-upload-file-selector qq-upload-file"></span>
                  <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                  <span class="qq-upload-size-selector qq-upload-size"></span>
                  <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                  <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                  <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                  <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>
</body>
</html>

如果我错过任何配置设置，请建议。

谢谢， Sameek

Answer 1

有多种方法可以确定哪些文件已提交给Fine Uploader。例如，通过getUploads API方法：

var submittedFiles = uploader.getUploads({status: qq.status.SUBMITTED});

或通过onSubmitted event handler：

callbacks: {
    onSubmitted: function(id) {
        // handle submitted file with id of `id`...
    }

有关详细信息，请参阅http://docs.fineuploader.com。

如何在UI上显示拖动文件和剩余文件？

1 个答案: