有人可以解释如何实现jQueryfile upload插件？

编辑：

这似乎仍然是stream量，所以我会解释我最终做了什么。 我最终通过遵循Subrat的教程来获得插件，这是可以接受的答案。 然而，jQueryfile upload是一个真正的麻烦，如果你正在寻找一个简单的file upload插件，我会强烈推荐Uploadify （感谢CORSAIR！）。 答案指出，只有非商业用途才是免费的。

背景

我试图使用blueimp的jQueryfile upload来允许用户上传文件。 按照设置说明， 开箱即可完美工作 。 但要真正在我的网站上使用它，我想能够做一些事情：

• 在我现有的任何页面上添加上传器
• 更改上传文件的目录

插件的所有文件都位于根目录下的文件夹中。

我试过了…

• 将演示页面移至根目录并更新必要脚本的path
• 按照这里的build议更改UploadHandler.php文件中的“upload_dir”和“upload_url”选项。
• 更改演示javascript的第二行中的url

在所有情况下，预览显示和进度条运行，但文件无法上传，并在控制台中得到这个错误： Uncaught TypeError: Cannot read property 'files' of undefined 。 我不明白插件的所有部分是如何工作的，这使得它很难debugging。

码

演示页面中的JavaScript：

 $(function () { 'use strict'; // Change this to the location of your server-side upload handler: var url = 'file_upload/server/php/UploadHandler.php', uploadButton = $('<button/>') .addClass('btn') .prop('disabled', true) .text('Processing...') .on('click', function () { var $this = $(this), data = $this.data(); $this .off('click') .text('Abort') .on('click', function () { $this.remove(); data.abort(); }); data.submit().always(function () { $this.remove(); }); }); $('#fileupload').fileupload({ url: url, dataType: 'json', autoUpload: false, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxFileSize: 5000000, // 5 MB // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), previewMaxWidth: 100, previewMaxHeight: 100, previewCrop: true }).on('fileuploadadd', function (e, data) { data.context = $('<div/>').appendTo('#files'); $.each(data.files, function (index, file) { var node = $('<p/>') .append($('<span/>').text(file.name)); if (!index) { node .append('<br>') .append(uploadButton.clone(true).data(data)); } node.appendTo(data.context); }); }).on('fileuploadprocessalways', function (e, data) { var index = data.index, file = data.files[index], node = $(data.context.children()[index]); if (file.preview) { node .prepend('<br>') .prepend(file.preview); } if (file.error) { node .append('<br>') .append(file.error); } if (index + 1 === data.files.length) { data.context.find('button') .text('Upload') .prop('disabled', !!data.files.error); } }).on('fileuploadprogressall', function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); }).on('fileuploaddone', function (e, data) { $.each(data.result.files, function (index, file) { var link = $('<a>') .attr('target', '_blank') .prop('href', file.url); $(data.context.children()[index]) .wrap(link); }); }).on('fileuploadfail', function (e, data) { $.each(data.result.files, function (index, file) { var error = $('<span/>').text(file.error); $(data.context.children()[index]) .append('<br>') .append(error); }); }).prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); }); 

---

我对缺乏文档感到惊讶，它似乎应该是一个简单的事情来改变。 我真的很感激，如果有人可以解释如何做到这一点。

Answer 1

几天前我正在寻找类似的function，在tutorialzine上遇到了一个很好的教程。 这是一个工作的例子。 完整的教程可以在这里find。

简单的forms来保存file upload对话框：

 <form id="upload" method="post" action="upload.php" enctype="multipart/form-data"> <input type="file" name="uploadctl" multiple /> <ul id="fileList"> <!-- The file list will be shown here --> </ul> </form> 

这里是上传文件的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 = $('<li class="working">'+ '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+ '<p></p><span></span></li>' ); // Append the file name and file size tpl.find('p').text(data.files[0].name) .append('<i>' + formatFileSize(data.files[0].size) + '</i>'); // 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(); } 

上面的代码可以添加到任何现有的表单。 这个程序一旦添加就自动上传图像。 在提交现有表单时，可以更改此function，并可以提交图像。

用实际的代码更新了我的答案。 所有的信用原始作者的代码。

资料来源： http ： //tutorialzine.com/2013/05/mini-ajax-file-upload-form/

Answer 2

我刚刚花了2个小时与jQuery Upload进行对抗，但是由于依赖关系的限制，我放弃了13个JS文件来获得所有的花里胡哨的东西。

我做了一些更多的search，发现了一个名为Dropzone.js的完整项目，它没有任何依赖关系。

作者还创build了一个由jQuery File Upload插件启发的引导程序演示 。

我希望这能节省一些别人的时间。

Answer 3

我也努力，但得到它的工作，一旦我想出了如何在UploadHandler.php的path工作：upload_dir和upload_url是唯一的设置来看待它的工作。 同时检查您的服务器错误日志的debugging信息。

Answer 4

使用dropper jquery插件检查图像拖放上传器的图像预览。

HTML

 <div class="target" width="78" height="100"><img /></div> 

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('<img id="imgPreview"/><span style="display:none">Drag and drop files or click to select</span>'); 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

Answer 5

这是很好的Angular插件上传文件，它的免费！

angular度file upload

Answer 6

你可以使用uploadify这是我用过的最好的multiupload jquery插件。

实现容易，浏览器支持完美。

Answer 7

我在Rails上苦苦挣扎了一段时间，然后有人把它伪装成了所有我创build的代码。

虽然看起来你没有在Rails中使用这个，但是如果有人正在使用它检出这个gem 。 源代码在这里 – > jQueryFileUpload Rails 。

更新：

为了满足评论者，我已经更新了我的答案。 本质上是“ 使用这个gem ， 这里是源代码 ”如果它消失，那么做很长的路要走。

Answer 8

用于UI插件，带有jsp页面和Spring MVC ..

示例html 。 需要位于具有fileupload的id属性的表单元素中

  <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="fileupload-buttonbar"> <div> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Add files</span> <input id="fileuploadInput" type="file" name="files[]" multiple> </span> <%-- https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined --%> <button type="button" class="btn btn-primary start"> <i class="glyphicon glyphicon-upload"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel upload</span> </button> <!-- The global file processing state --> <span class="fileupload-process"></span> </div> <!-- The global progress state --> <div class="fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar progress-bar-success" style="width:0%;"></div> </div> <!-- The extended global progress state --> <div class="progress-extended">&nbsp;</div> </div> </div> <!-- The table listing the files available for upload/download --> <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload-ui.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/vendor/jquery.ui.widget.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.iframe-transport.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-process.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-validate.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-ui.js"></script> <script type="text/javascript"> $(document).ready(function () { var maxFileSizeBytes = ${maxFileSizeBytes}; if (maxFileSizeBytes < 0) { //-1 or any negative value means no size limit //set to undefined //https://stackoverflow.com/questions/5795936/how-to-set-a-javascript-var-as-undefined maxFileSizeBytes = void 0; } //https://github.com/blueimp/jQuery-File-Upload/wiki/Options //https://stackoverflow.com/questions/34063348/jquery-file-upload-basic-plus-ui-and-i18n //https://stackoverflow.com/questions/11337897/how-to-customize-upload-download-template-of-blueimp-jquery-file-upload $('#fileupload').fileupload({ url: '${pageContext.request.contextPath}/app/uploadResources.do', fileInput: $('#fileuploadInput'), acceptFileTypes: /(\.|\/)(jrxml|png|jpe?g)$/i, maxFileSize: maxFileSizeBytes, messages: { acceptFileTypes: '${fileTypeNotAllowedText}', maxFileSize: '${fileTooLargeMBText}' }, filesContainer: $('.files'), uploadTemplateId: null, downloadTemplateId: null, uploadTemplate: function (o) { var rows = $(); $.each(o.files, function (index, file) { var row = $('<tr class="template-upload fade">' + '<td><p class="name"></p>' + '<strong class="error text-danger"></strong>' + '</td>' + '<td><p class="size"></p>' + '<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' + '<div class="progress-bar progress-bar-success" style="width:0%;"></div></div>' + '</td>' + '<td>' + (!index && !o.options.autoUpload ? '<button class="btn btn-primary start" disabled>' + '<i class="glyphicon glyphicon-upload"></i> ' + '<span>${startText}</span>' + '</button>' : '') + (!index ? '<button class="btn btn-warning cancel">' + '<i class="glyphicon glyphicon-ban-circle"></i> ' + '<span>${cancelText}</span>' + '</button>' : '') + '</td>' + '</tr>'); row.find('.name').text(file.name); row.find('.size').text(o.formatFileSize(file.size)); if (file.error) { row.find('.error').text(file.error); } rows = rows.add(row); }); return rows; }, downloadTemplate: function (o) { var rows = $(); $.each(o.files, function (index, file) { var row = $('<tr class="template-download fade">' + '<td><p class="name"></p>' + (file.error ? '<strong class="error text-danger"></strong>' : '') + '</td>' + '<td><span class="size"></span></td>' + '<td>' + (file.deleteUrl ? '<button class="btn btn-danger delete">' + '<i class="glyphicon glyphicon-trash"></i> ' + '<span>${deleteText}</span>' + '</button>' : '') + '<button class="btn btn-warning cancel">' + '<i class="glyphicon glyphicon-ban-circle"></i> ' + '<span>${clearText}</span>' + '</button>' + '</td>' + '</tr>'); row.find('.name').text(file.name); row.find('.size').text(o.formatFileSize(file.size)); if (file.error) { row.find('.error').text(file.error); } if (file.deleteUrl) { row.find('button.delete') .attr('data-type', file.deleteType) .attr('data-url', file.deleteUrl); } rows = rows.add(row); }); return rows; } }); }); </script> 

示例上传和删除请求处理程序

  @PostMapping("/app/uploadResources") public @ResponseBody Map<String, List<FileUploadResponse>> 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<String, List<FileUploadResponse>> response = new HashMap<>(); List<FileUploadResponse> 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<String> 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<String, List<Map<String, Boolean>>> deleteResources(@RequestParam("filename") List<String> filenames) { Map<String, List<Map<String, Boolean>>> response = new HashMap<>(); List<Map<String, Boolean>> fileList = new ArrayList<>(); String templatesPath = Config.getTemplatesPath(); for (String filename : filenames) { Map<String, Boolean> 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; } 

用于生成所需的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