Несколько дней назад я искал аналогичную функциональность и наткнулся на хороший учебник по tutorialzine. Вот рабочий пример. Полный учебник можно найти здесь .

Простая форма для хранения диалога загрузки файлов:

И вот код jQuery для загрузки файлов:

 $('#upload').fileupload({ // This function is called when a file is added to the queue add: function (e, data) { //This area will contain file list and progress information. var tpl = $('
'+ ''+ '
' ); // Append the file name and file size tpl.find('p').text(data.files[0].name) .append('' + formatFileSize(data.files[0].size) + ''); // Add the HTML to the UL element data.context = tpl.appendTo(ul); // Initialize the knob plugin. This part can be ignored, if you are showing progress in some other way. tpl.find('input').knob(); // Listen for clicks on the cancel icon tpl.find('span').click(function(){ if(tpl.hasClass('working')){ jqXHR.abort(); } tpl.fadeOut(function(){ tpl.remove(); }); }); // Automatically upload the file once it is added to the queue var jqXHR = data.submit(); }, progress: function(e, data){ // Calculate the completion percentage of the upload var progress = parseInt(data.loaded / data.total * 100, 10); // Update the hidden input field and trigger a change // so that the jQuery knob plugin knows to update the dial data.context.find('input').val(progress).change(); if(progress == 100){ data.context.removeClass('working'); } } }); //Helper function for calculation of progress function formatFileSize(bytes) { if (typeof bytes !== 'number') { return ''; } if (bytes >= 1000000000) { return (bytes / 1000000000).toFixed(2) + ' GB'; } if (bytes >= 1000000) { return (bytes / 1000000).toFixed(2) + ' MB'; } return (bytes / 1000).toFixed(2) + ' KB'; } 

И вот пример кода PHP для обработки данных:

 if($_POST) { $allowed = array('jpg', 'jpeg'); if(isset($_FILES['uploadctl']) && $_FILES['uploadctl']['error'] == 0){ $extension = pathinfo($_FILES['uploadctl']['name'], PATHINFO_EXTENSION); if(!in_array(strtolower($extension), $allowed)){ echo '{"status":"error"}'; exit; } if(move_uploaded_file($_FILES['uploadctl']['tmp_name'], "/yourpath/." . $extension)){ echo '{"status":"success"}'; exit; } echo '{"status":"error"}'; } exit(); } 

Вышеприведенный код может быть добавлен в любую существующую форму. Эта программа автоматически загружает изображения после их добавления. Эта функция может быть изменена, и вы можете отправить изображение, пока вы отправляете свою существующую форму.

Обновлен мой ответ с фактическим кодом. Все кредиты оригинальному автору кода.

Источник: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

Я только что провел 2 часа, сражаясь с загрузкой jQuery, но сдался из-за количества зависимостей (у меня было 13 JS-файлов, включенных, чтобы получить все колокола и свистки).

Я сделал немного больше поиска и наткнулся на опрятный проект под названием Dropzone.js , который не имеет никаких зависимостей.

Автор также создал демо-версию bootstrap, которая была вдохновлена ​​плагином загрузки файлов jQuery.

Надеюсь, это поможет кому-то еще некоторое время.

Я также боролся с этим, но получил его работу, как только я понял, как пути работают в UploadHandler.php: upload_dir и upload_url, – это единственные настройки, на которые можно посмотреть, чтобы заставить его работать. Также проверьте свои журналы ошибок сервера для отладки информации.

Просмотрите загружаемый файл с drag and dropм изображения с предварительным просмотром изображения с помощью плагина jQuery.

HTML

JS

 $(".target").dropper({ action: "upload.php", }).on("start.dropper", onStart); function onStart(e, files){ console.log(files[0]); image_preview(files[0].file).then(function(res){ $('.dropper-dropzone').empty(); //$('.dropper-dropzone').css("background-image",res.data); $('#imgPreview').remove(); $('.dropper-dropzone').append('Drag and drop files or click to select'); var widthImg=$('.dropper-dropzone').attr('width'); $('#imgPreview').attr({width:widthImg}); $('#imgPreview').attr({src:res.data}); }) } function image_preview(file){ var def = new $.Deferred(); var imgURL = ''; if (file.type.match('image.*')) { //create object url support var URL = window.URL || window.webkitURL; if (URL !== undefined) { imgURL = URL.createObjectURL(file); URL.revokeObjectURL(file); def.resolve({status: 200, message: 'OK', data:imgURL, error: {}}); } //file reader support else if(window.File && window.FileReader) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function () { imgURL = reader.result; def.resolve({status: 200, message: 'OK', data:imgURL, error: {}}); } } else { def.reject({status: 1001, message: 'File uploader not supported', data:imgURL, error: {}}); } } else def.reject({status: 1002, message: 'File type not supported', error: {}}); return def.promise(); } $('.dropper-dropzone').mouseenter(function() { $( '.dropper-dropzone>span' ).css("display", "block"); }); $('.dropper-dropzone').mouseleave(function() { $( '.dropper-dropzone>span' ).css("display", "none"); }); 

CSS

 .dropper-dropzone{ width:78px; padding:3px; height:100px; position: relative; } .dropper-dropzone>img{ width:78px; height:100px; margin-top=0; } .dropper-dropzone>span { position: absolute; right: 10px; top: 20px; color:#ccc; } .dropper .dropper-dropzone{ padding:3px !important } 

Демо-версия Jsfiddle

Это хорошо Угловой плагин для загрузки файлов, и его бесплатно!

загрузка углового файла

Некоторое время я боролся с этим плагином на Rails, а затем кто-то подсказал, что он переустанавливает весь код, который я создал.

Хотя похоже, что вы не используете это в Rails, однако, если кто-то использует его, проверьте этот gem . Источник находится здесь -> jQueryFileUpload Rails .

Обновить:

Чтобы удовлетворить комментатора, я обновил свой ответ. По существу « используйте этот камень , вот исходный код ». Если он исчезнет, ​​сделайте это длинным путем.

Вы можете использовать uploadify, это лучший плагин jupery multiupload, который я использовал.

Реализация прост, поддержка браузера прекрасна.

Для плагина пользовательского интерфейса, с jsp-страницей и Spring MVC ..

Пример html . Нужно находиться в элементе формы с атрибутом id файловой загрузки

   
 
    Add files   <%-- https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined --%>   Start upload    Cancel upload    
  
  
 
 
  
 
 
 
            

Образцы загрузки и удаления запросов

  @PostMapping("/app/uploadResources") public @ResponseBody Map> uploadResources(MultipartHttpServletRequest request, Locale locale) { //https://github.com/jdmr/fileUpload/blob/master/src/main/java/org/davidmendoza/fileUpload/web/ImageController.java //https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler Map> response = new HashMap<>(); List fileList = new ArrayList<>(); String deleteUrlBase = request.getContextPath() + "/app/deleteResources.do?filename="; //http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/multipart/MultipartRequest.html Iterator itr = request.getFileNames(); while (itr.hasNext()) { String htmlParamName = itr.next(); MultipartFile file = request.getFile(htmlParamName); FileUploadResponse fileDetails = new FileUploadResponse(); String filename = file.getOriginalFilename(); fileDetails.setName(filename); fileDetails.setSize(file.getSize()); try { String message = saveFile(file); if (message != null) { String errorMessage = messageSource.getMessage(message, null, locale); fileDetails.setError(errorMessage); } else { //save successful String encodedFilename = URLEncoder.encode(filename, "UTF-8"); String deleteUrl = deleteUrlBase + encodedFilename; fileDetails.setDeleteUrl(deleteUrl); } } catch (IOException ex) { logger.error("Error", ex); fileDetails.setError(ex.getMessage()); } fileList.add(fileDetails); } response.put("files", fileList); return response; } @PostMapping("/app/deleteResources") public @ResponseBody Map>> deleteResources(@RequestParam("filename") List filenames) { Map>> response = new HashMap<>(); List> fileList = new ArrayList<>(); String templatesPath = Config.getTemplatesPath(); for (String filename : filenames) { Map fileDetails = new HashMap<>(); String cleanFilename = ArtUtils.cleanFileName(filename); String filePath = templatesPath + cleanFilename; File file = new File(filePath); boolean deleted = file.delete(); if (deleted) { fileDetails.put(cleanFilename, true); } else { fileDetails.put(cleanFilename, false); } fileList.add(fileDetails); } response.put("files", fileList); return response; } 

Пример classа для генерации требуемого json-ответа

  public class FileUploadResponse { //https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler private String name; private long size; private String error; private String deleteType = "POST"; private String deleteUrl; /** * @return the name */ public String getName() { return name; } /** * @param name the name to set */ public void setName(String name) { this.name = name; } /** * @return the size */ public long getSize() { return size; } /** * @param size the size to set */ public void setSize(long size) { this.size = size; } /** * @return the error */ public String getError() { return error; } /** * @param error the error to set */ public void setError(String error) { this.error = error; } /** * @return the deleteType */ public String getDeleteType() { return deleteType; } /** * @param deleteType the deleteType to set */ public void setDeleteType(String deleteType) { this.deleteType = deleteType; } /** * @return the deleteUrl */ public String getDeleteUrl() { return deleteUrl; } /** * @param deleteUrl the deleteUrl to set */ public void setDeleteUrl(String deleteUrl) { this.deleteUrl = deleteUrl; } } 

См. https://pitipata.blogspot.co.ke/2017/01/using-jquery-file-upload-ui.html.

Привет, попробуйте ссылку, это очень просто. Я застрял в течение долгого времени, и он решил мою проблему через несколько минут. http://simpleupload.michaelcbrook.com/#examples