使用多个上传按钮评估 ajax 文件上传

Question

我正在使用valums ajax file upload，但我在同一页面上有多个上传按钮时遇到了一些问题。可能是我遗漏了什么吗？

以下是 1 个上传按钮的代码。

    <div id="file-uploader-demo1">      
    <noscript>          
        <p>Please enable JavaScript to use file uploader.</p>
        <!-- or put a simple form for upload here -->
    </noscript>         
</div>


<script>        
    function uploader(){            
        var uploader1 = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            action: 'do-nothing.htm',
            debug: true
        });           
    }
    // in your app create uploader as soon as the DOM is ready
    // don't wait for the window to load  
    window.onload = uploader;     

</script>    

谢谢。 阿努

Answer 1

好吧，既然没有人回答这个问题，我敢打赌人们会觉得它很有用，这就是我所做的：

jQuery('.btnUploader').each(function (index) {
    var uploader1 = new qq.FileUploader({

        element: jQuery('.btnUploader')[index], // The HTML element to turn into the uploader

        action: getUrl('ControllerUploadHandler', 'Home'), // Action method that will handle the upload

        multiple: false, // Single or Mutliple file selection

        allowedExtensions: ['png', 'jpeg', 'jpg', 'gif', 'bmp'], // File Type restrictions

        sizeLimit: 0, // Max File Size
        minSizeLimit: 0, // Min File Size

        debug: false, // When true outputs server response to browser console

        // Show a preview of the uploaded image
        onComplete: function (id, fileName, responseJSON) {

            //            // Get the preview container
            //            var $previewContainer = jQuery('#uploader1Preview');

            //            // Create the preview img element
            //            var $preview = jQuery('<img />');
            //            // Add the current time to the end of the preview handler's url to prevent caching by the browser
            //            $preview.attr('src', getUrl() + 'Content/handlers/previewPhoto.ashx?filename=' + fileName + '&v=' + new Date().getTime());
            //            // Hide the preview and set it's size
            //            $preview.css({ display: 'none', width: '90%', height: '200px' });

            //            // Make sure the preview's container is empty
            //            $previewContainer.html('');
            //            // Append the preview to the container
            //            $previewContainer.append($preview);

            //            // Fade in the preview
            //            $preview.fadeIn('slow');

        }
    });
});

只需将其放入 each 中，在其周围包装一个函数，发送索引，然后就完成了。