Question

我一直在尝试将blueimp jquery文件上传器集成到我的网站中，虽然事情很有效，但仍有一个问题。当我将文件放入浏览器屏幕的任何部分时会触发文件上传，但在这种特殊情况下，我只希望在将文件放入div时发生。

到目前为止，我的代码是：

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<style>
.bar {
    height: 18px;
    background: green;
}
</style>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
<form class="fileupload" action="upload.asp">
<div style="position:relative;border:1px solid black;height:200px;">
<h1>Drag file(s) into here or click Choose Files
</div>
<input id="fileupload" type="file" name="file1" data-url="upload.asp" multiple>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(document).bind('drop dragover', function (e) {
    e.preventDefault();
});

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'

        );
        if (progress==100) {
        alert('All done');
        $('#progress .bar').css( 'width', '0%' );
        }
    }
});
</script>
</body> 
</html>

我试图按照此页面上的说明操作：

https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

它讨论了对main.js文件的更改，但因为我使用的是基本版本，所以我不会使用这个文件（我认为）。

希望有人可以提供帮助！

非常感谢

版

Answer 1

你应该设置

dropZone: $(this)

选项中的

。这也可以确保如果您有多个<div>接受上传，则不会上传多个。

我目前的代码如下：

$('.dragTarget').each(function() {
    $(this).fileupload({
        ...
        dropZone:  $(this), 
        ...
};

blueimp jQuery文件在div中上传

1 个答案: