标签: jquery-file-upload

假设我们有处理创建、读取、更新和删除文章的 Web 应用程序，并且每篇文章都应该有图片库。我必须在文章和画廊之间建立一对一的关系，在画廊和媒体之间建立一对多的关系。

HTML5 提供了很多功能，例如 multiupload，因此我想为此使用这个出色的http://blueimp.github.io/jQuery-File-Upload/插件。问题是如何像其他表单的数据一样处理“内存中”的文件上传？

例如，当我们显示创建新文章的页面时，我们应该能够填写文章的数据字段并选择要上传的图片，接下来当我们点击保存按钮时，图片应该开始上传，然后提交表单。当验证失败时，图像仍应显示在前端，但在服务器端 nothink 应保存。

解决方案之一是在显示整个表单之前创建一些类似“创建实体会话临时 id”的想法，该 id 可用于创建临时目录以保存上传，因此在成功保存表单后，这些图像可以移动到适当的目录，但是如何使“创建实体会话临时ID”？

我认为的另一个解决方案是“使用编辑 ID”方法，因为我们可以使用以前保存的画廊 ID 处理上传，但有时我无法使用画廊保存新的空白文章，因为某些字段不应为空在数据库中。

对于 Rails，我在自述文件中看到了https://github.com/thoughtbot/paperclip gem：

Paperclip 旨在作为 Active Record 的简单文件附件库。其背后的意图是使设置尽可能简单，并尽可能像对待其他属性一样对待文件。这意味着它们不会保存到磁盘上的最终位置，如果设置为 nil，它们也不会被删除，直到调用 ActiveRecord::Base#save。

我的问题是它是如何工作的？

我正在使用jQuery fileupload插件.

我把上传器放在一个表格里面(可能不太理想).添加到队列后,文件会自动上载.

这是处理它的部分:

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-readOnly="1" /><p></p><i class="icon-remove"></i></li>');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                .append('<span>' + formatFileSize(data.files[0].size) + '</span>');

            // Add the HTML to the UL element
            $t.find('.auc-upload-list').append(tpl);
            data.context = tpl;

            // Initialize the knob plugin
            tpl.find('input').knob({
                width: 20,
                height: 20
            });

            // Listen …

我遇到了jQuery File Uploader(blueimp)的问题:

我的实现是完全自定义的.我使用图像预览和验证.

我的问题是,即使我在我的fileuploadadd事件中定义data.context ,它在fileuploadprogress被触发时也是空的.

$('fileinput-element').fileupload({
    url: '/__module/uploadModule/receive',
    type: 'post',
    acceptFileTypes: acceptedFileRegEx,
    dataType: 'json',
    'dropZone': $(dropZone),
    paramName: 'files',
    autoUpload: false,
}).on('fileuploadadd', function (e, data) {

    $.each(data.files, function (index, file) {

        // NOTE: This function call returns a clone of an element that i use as template for upload list items. Works fine.
        var component=uploadModule.getDynamicComponent('listItemContainer');

        // Filling the template (code omitted due to better readabilty)

        // Appending the component to my #uploadList and assigning …

我在 Spring java 中做项目。需要在不使用表单提交的情况下上传图像并仅使用 jquery 的 ajax 调用（因为我需要在同一页面中处理图像）

我有type=file 的输入标签和

我已经在 spring maven 中加载了commons-fileupload、commons-io jar并且还添加了multipartResolver

现在我正在为 servlet 使用以下代码

@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> upload(@RequestParam("file") MultipartFile file) {
    Map<String, Object> map = Maps.newHashMap();
    try {
    BufferedImage src = ImageIO.read(new ByteArrayInputStream(file.getBytes()));
    File destination = new File("C:/Users/XXX/Desktop/Image_files/Image1.png");
    ImageIO.write(src, "png", destination);
    } catch(Exception e) {
        e.printStackTrace();
    }
    return map;
}

我的js文件

$("#uploadbutton").on("click", function() {
var oMyForm = new FormData();
oMyForm.append("file", $("#imageid").prop("files")[0]);
$.ajax({
    url: "/photo/upload/upload", …

嗨,我正在使用jQuery文件上传

它工作正常,我向用户显示一个进度条,显示上传进度,代码如下:

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

在我的页面上,我刚刚包含了jquery.fileupload.js文件.在progressall函数的数据中,我可以看到比特率,总文件大小和当前加载的数据,正如我所说,按预期更新我的进度条.但是,在网站上阅读此链接表明我可以获得额外信息,包括剩余时间？然而,我一直无法做到这一点.还有一个jquery.fileupload-ui.js文件 - 我尝试在我的jquery.fileupload.js之后包含它,但我没有看到时间仍然有问题被添加到progressall函数中的数据.我也试过删除jquery.fileupload.js,只是包含了jquery.fileupload-ui.js但是这打破了我的文件上传而且它没有运行.

无论如何,我可以轻松地计算使用比特率/数据加载和总大小的剩余时间,还是有人建议我应该从插件中获得这个扩展信息的正确方法？

我在实现 Blueimp 的 Jquery 上传时遇到了一个小问题。

我有一个表单，其中包含用于上传的几个不同的文件字段。

    <div id="file1">
    <input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=1">         
    <div  class="dropzone fade well" data-url="jQueryFileUpload.php?pic=1">Drop files here</div>
    <div class="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <input type="text" name="pic1"  id="pic1" value="">
</div>
<div id="file2">
    <input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=2">         
    <div  class="dropzone fade well" data-url="jQueryFileUpload.php?pic=2">Drop files here</div>
    <div class="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <input type="text" name="pic2"  id="pic2" value="">
</div>

<script>
$(function () {
$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            var fileName = …

目标是：

1. 能够从浏览器上传文件
2. 能够将上传直接流式传输到 S3
3. 将上传进度中继到浏览器

我花了一段时间才弄清楚这一点（并且还没有完全找到在 StackOverflow 上完成所有 3 个的答案）所以发布我的答案，以防其他人遇到同样的问题。

我愿意接受更好的解决方案的建议（我的速度非常糟糕）。

我使用jQuery File Upload Basic Plus Ui来处理多个上传文件.我需要以多种语言(英语,法语和西班牙语)显示错误消息,但我不知道如何创建

messages: {
      maxNumberOfFiles: 'Maximum number of files exceeded',
      acceptFileTypes: 'File type not allowed'
      maxFileSize: 'File is too large',
      minFileSize: 'File is too smal
}

多种语言以及如何声明语言

file.error = settings.i18n('acceptFileTypes');

使用演示版本,错误消息显示正常.

谢谢

我正在研究基本的拖放功能,它在其他浏览器中运行良好但在IE 11中运行不正常.我在另一个项目中使用iframe调用html代码.

没有iframe但没有iframe,它工作正常.任何人都可以为此提供解决方案吗？

提前致谢.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Upload</title>
<meta name="description" content="File Upload ">
<meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">  
    <table><tbody> <tr><td><span id="upload" >
                          <span>Upload</span><input id="fileupload" type="file" name="fileupload">
                    </span></td><td id="filename"></td><td id="percent" style="padding-left: 35px;"></td></tr>
    </tbody>
</table>
</div>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
 <script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script> 

<script type="text/javascript">
    $(document).ready(function() {
        $(document).bind('drop dragover', function(e) {
            /* e.preventDefault(); */
        });
        if(typeof window.parent.fileid  == 'undefined'){
            window.parent.fileid = "";
        }            
        var params = // some prams
        $('#fileupload').fileupload({
            dataType : 'json',
            formData : params, …

我遇到了jquery-file-upload和Backbone的上下文问题.在fileupload'完成'回调中,我想调用Backbone视图中定义的另一个函数,但是我丢失了上下文.

class MyBackboneView extends Backbone.view

    initialize_fileupload: ->
        $('form#my_form').fileupload
            done: (e, data) ->
                this.some_function()

    some_function: ->
        ...

浏览器控制台中返回的错误是"未捕获的TypeError:对象#没有方法'some_function'",因为"this"不再引用Backbone视图,而是引用jquery表单元素.

有没有办法从回调中访问视图中的该函数？

我有一个表单,我通过AJAX提交,所以服务器的预期响应格式是javascript.问题是我无法像这样进行验证工作.通常我会这样做:

  # POST /cats
  # POST /cats.json
  def create
    @cat = Cat.new(cat_params)

    respond_to do |format|
      if @cat.save
        format.html { redirect_to @cat, notice: 'Cat was successfully created.' }
        format.json { render action: 'show', status: :created, location: @cat }
      else
        format.html { render action: 'new' }
        format.json { render json: @cat.errors, status: :unprocessable_entity }
      end
    end
  end 

但现在我有这样的情况:

  # POST /cats
  # POST /cats.json
  def create
    @cat = Cat.new(cat_params)

    respond_to do |format|
      if @cat.save
        format.js { }
      else
        format.js { ????? } …