Поэтому я немного борюсь, чтобы найти то, что я ищу, и как его реализовать.
У меня есть базовый загрузчик файлов PHP, в котором пользователь нажимает пользовательскую кнопку загрузки, выбирает файл, а затем использует JS, он проверяет изменение (то есть пользователь, выбирающий файл), а затем отправляет форму, которая загружает изображение хорошо.
То, что я также хочу сейчас, – это перетащить и загрузить область загрузки. Таким образом, пользователь может перетащить изображение из своего проводника файлов и отбросить его в определенном месте (не на всей странице), а затем, как только это изображение будет удалено, форма автоматически отправится с их изображением и использует ту же обработку PHP.
Возможно ли это и реалистично?
Это абсолютно реалистично и возможно без использования сторонних плагинов.
Следующие фрагменты должны дать вам представление о том, как он может работать:
Область падения
$(".drop-files-container").bind("drop", function(e) { var files = e.originalEvent.dataTransfer.files; processFileUpload(files); // forward the file object to your ajax upload method return false; }); метод processFileUpload ():
function processFileUpload(droppedFiles) { // add your files to the regular upload form var uploadFormData = new FormData($("#yourregularuploadformId")[0]); if(droppedFiles.length > 0) { // checks if any files were dropped for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files } } // the final ajax call $.ajax({ url : "upload.php", // use your target type : "POST", data : uploadFormData, cache : false, contentType : false, processData : false, success : function(ret) { // callback function } }); }
пример формы
<form enctype="multipart/form-data" id="yourregularuploadformId"> <input type="file" name="files[]" multiple="multiple"> </form>
Не стесняйтесь использовать что-то подобное в качестве отправной точки. Поддержка этого браузера вы можете найти здесь http://caniuse.com/#feat=xhr2
Конечно, вы можете добавить какие-либо дополнения, которые вам нравятся, как индикатор выполнения, предварительный просмотр, анимация …
Проверьте этот плагин jQuery! С загрузкой файла Ajax и другими: http://blueimp.github.com/jQuery-File-Upload/
Виджет загрузки файлов с несколькими выборами файлов, поддержкой перетаскивания и перехода, индикаторами выполнения и изображениями предварительного просмотра для jQuery. Поддержка междоменного, пакетного и возобновляемого добавления файлов и изменения размера изображения на стороне клиента. Работает с любой серверной платформой (PHP, Python, Ruby on Rails, Java, Node.js, Go и т. Д.), Которая поддерживает стандартные загрузки файлов в формате HTML.