blueimp jQuery文件在div上傳

我一直在嘗試將blueimp jquery文件上傳器集成到我的網站中，雖然事情非常有效，但仍然存在一個問題。當我將文件放入瀏覽器屏幕的任何部分時，會觸發文件上傳，但在這種特殊情況下，我只希望在將文件放入div時發生這種情況。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文件但因爲我使用的是基本版本，我不使用這個文件（我認爲）。

希望有人能幫助！

非常感謝

埃德

來源

2015-04-19 Ed Mozley

您應該設置

dropZone: $(this)

在選項

。這也確保如果您有多個接受上傳的<div>，則不會獲得多次上傳。

我當前的代碼如下所示：

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

來源

2015-04-29 12:24:17 Mrten

blueimp jQuery文件在div上傳

回答

相關問題