2015-04-19 3 views
0

Я пытаюсь интегрировать загружаемый файл 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 но поскольку я использую базовую версию, я не использую этот файл (я думаю).

Надеюсь, кто-то может помочь!

Большое спасибо

Ed

ответ

0

Вы должны установить

dropZone: $(this) 

в опциях. Это также гарантирует, что если у вас есть несколько <div>, которые принимают заказы, вы не получаете несколько загрузок.

Мой текущий код выглядит следующим образом:

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