标签: jquery-file-upload

我正在使用jQuery文件上传插件,它有一个API以编程方式上传文件.文档写道:

$('#fileupload').fileupload('add', {files: filesList});

问题是我不知道filesList应该是什么.我尝试了下面的失败:

$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});

应该filesList是什么？

我正在尝试利用由blueimp开发的jQuery文件上传插件中提供的客户端图像大小调整:https://github.com/blueimp/jQuery-File-Upload

不幸的是,我不能让图像调整大小工作.上传本身运作完美.

this.$('.fileupload').fileupload({
    url: websiteUrl + 'deed/uploadimage',
    dataType: 'json',
    previewMaxWidth: 90,
    previewMaxHeight: 90,
    previewCrop: true,
    imageOrientation: true,
    disableImageResize: false,
    add: function($, data) {
        _.each(data.files, function(file){
            file.model = self.addImagePreview();
        });
        _.defer(_.bind(data.submit, data));
    },
    done: function($, data) {
        // Quirky shit. Iterate over data.files array while we know that
        // only one file are uploaded at a time...
        _.each(data.files, function(file){
            file.model.set({
                "uploading": false,
                "src": data.response().result.image,
                "preview": data.response().result.cropped
            });
        });
    }
});

我已经尝试在resizeImage方法中放置一个断点,看看它是否由于某种原因破坏了其中一个条件,但是从不调用该方法.

所有依赖项按此顺序加载:

load-image.min.js
canvas-to-blob.js
jquery.ui.widget.js
jquery.fileupload.js …

我在这个主题上看到了很多问题,但是我遇到的任何问题对我都有用,所以我在这里发布另一个......

我正在Ruby on Rails上尝试使用jQuery File Upload插件直接配置文件上传到Amazon S3 .我跟着非常有用的Heroku教程来完成初始设置.文件上传很好,但是它们都标记为Content-Type: binary/octet-streamS3,所以当它们在应用程序中提供时,所有文件都会下载而不是直接打开.

这是一个问题,因为我试图允许图像,PDF,音频或视频文件,所以我需要能够Content-Type从文件中获取正确的文件并将其传递给S3.在看在亚马逊AWS的-SDK文档宝石,我看到这一节有关添加.where(:content_type).starts_with("")到presigned后对象的末尾修改政策.但是,当我这样做时,它引发了一个错误:

<Error><Code>AccessDenied</Code>
<Message>Invalid according to Policy: Policy Condition failed: ["starts-with", "$Content-Type", ""]</Message>

所以我添加content_type: ""了预先签名的post对象的opts哈希,现在它再次工作,但是所有文件默认为binary/octet-stream默认的所有文件默认为image/jpeg.这是我现在的代码:

调节器

def new
  @s3_direct_post = S3_BUCKET.presigned_post(
                  key: "uploads/#{SecureRandom.uuid}/${filename}",
                  success_action_status: 201,
                  acl: :public_read,
                  content_type: "").where(:content_type).starts_with("")
end

_form.html.haml

:javascript
  $(function() {
    $('.directUpload').find("input:file").each(function(i, elem) {
      var fileInput    = $(elem);
      var form         = $(fileInput.parents('form:first'));
      var submitButton = form.find('input[type="submit"]');
      var progressBar  = $("<div class='bar'></div>"); …

我正在尝试使用Blueimp的jQuery File Upload插件实现目录上传.Rails 4是我的后端,对于附件,我正在使用Carrierwave.

现在的问题是,jquery插件无法识别我正在上传的文件夹.我已经在输入字段中传递了webkitdirectory参数.有人可以帮我弄这个吗？

提前致谢.

这是application.js中的jQuery文件上载代码:

$('#fileupload').fileupload({
    dataType: "script",
    sequentialUploads: true,
    // 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) {
        data.context = $(tmpl("template-upload", data.files[
                0]))
        data.context.addClass('working');
        //$('.upload-status-box').addClass('working');
        $('#Upload-Bar').append(data.context);
        $('.upload-status-box').show();
        // Listen for clicks on the cancel button
        data.context.find('span.cancel-upload').click(
            function() {
                jqXHR.abort();
                data.context.fadeOut(function() {
                    data.context.remove();
                });
                count = count - 1;
                removeUploadStatusBoxOnCompletion();
            });
        var jqXHR = data.submit();
        count = count + 1;
    }, …

这是我如何使用角度jquery文件上传

var album = angular.module('album', ['restangular', 'blueimp.fileupload']),

.controller('somecontroller',function($scope,){
    $scope.options = {
        something
    }

 })

我所做的只是设置scope.options,更改控制器,一切都神奇地起作用

设置jquery文件上传似乎很容易,但有些事情让我很困惑

如何调用jquery文件上传的回调函数.例如,如果文件上传成功,我想通过调用fileuploaddone函数更新ui,它让我感到困惑,因为我的控制器中没有添加文件.

我是angularJS的新手,请帮我理解角度jquery文件上传的工作流程

我正在使用jquery-fileupload-rails来上传多个文件.

我希望能够设置文档名称并向其添加多个附件.

但是现在当我选择3个附件时,documents每个附件创建3 个附件.

我想我需要改变某种形式来添加附件.我添加了多个选项和编码名称.

我想使用这个插件,因为稍后我会想要添加拖放功能.

从

= simple_form_for [:member, @document], html: { multipart: true } do |f|
  = f.input :name
  = f.simple_fields_for :attachments, Attachment.new do |a|
    = a.file_field :attachment, multiple: true, name: "document[attachments_attributes][][attachment]"
  = f.submit

生成:

<input id="document_attachments_attributes_0_attachment" multiple="multiple" name="document[attachments_attributes][][attachment]" type="file">

JS

jQuery ->
    $('#new_document').fileupload()

楷模

class Document < ActiveRecord::Base
  has_many :attachments
  accepts_nested_attributes_for :attachments
end

class Attachment < ActiveRecord::Base
  belongs_to :document

  has_attached_file :attachment
end

调节器

class Member::DocumentsController < ApplicationController
  def new
    @document = Document.new
  end …

BlueImp jQuery 文件上传 GitHub 项目已被标记为“此存储库已由所有者存档。它现在是只读的。”。

请参阅： https: //github.com/blueimp/jQuery-File-Upload

但开发商尚未做出任何解释或发帖。没有继任或连续性计划。开发者声明 Stack Overflow 是该插件的官方支持方式，所以我在这里发帖，因为我现在无法在 GitHub 上发帖询问其只读状态。任何人或开发人员的任何见解都会很棒，因为我们在 PrimeFaces 中大量使用此插件。

我正在使用https://github.com/blueimp/jQuery-File-Upload提供的jquery文件上传插件 现在问题是我正在返回我刚刚上传的匹配图像的图像路径,如果遵循格式.

["upload\/2014-04-08-17-04-39000000_d.jpg","upload\/2014-04-08-17-04-39000000_d.jpg","upload\/2014-04-08-17-04-39000000_d.jpg","upload\/2014-04-08-17-04-39000000_d.jpg","upload\/2014-04-08-17-04-39000000_d.jpg","upload\/2014-04-08-17-04-39000000_d.jpg","upload\/2014-04-08-17-04-39000000_d.jpg"]

现在我无法弄清楚我怎么能得到这个响应.我的意思是通常ajax响应可以在success函数内获取,但我无法弄清楚以下上传器中的类似函数在哪里.

我正在尝试将大文件上传1GB到2GB使用jQuery File Upload - blueimp(基于Ajax) php / yii Framework 1.15我已将这些值设置为上传更大的文件

memory_limit = 2048M
upload_max_filesize = 2048M 
post_max_size = 2048M 

会话时间设置

ini_set('session.gc_maxlifetime', 7200);

我测试的1GB文件比成功上传的文件要小

当我尝试上传大于1GB文件时,它会在50分钟上传时间后显示Forbidden错误...

服务器规格

• 它是一个虚拟机,并且由于它不是生产尚未所以我们只用1CPU和1GB memory,64位

文件上传工作中Google Chrome和Microsoft Edge(我曾与1.15和1.88 GB文件测试)时,我上传文件Mozilla Firefox小于300MB它成功上传,但是当我尝试哟一段时间了Ajax调用后上传超过300MB的文件更大的失败,给500 Internal Server Error 标题响应位于下图中

我面临多个文件上传的问题。

问题是：

1. 如果我上传2 files只1文件被发送到后端。

2. 仅最后一个文件发送到服务器（跳过其他文件，换句话说，只有1个文件发送到后端）

问题：我遇到一种情况，在每次输入时我都可以浏览多个文件并可以单击提交。我希望每个文件都应该发送到服务器。

这里：jsfiddle显示我的问题：http : //jsfiddle.net/eabangalore/jyteus6c/2/

注意：请console.log检查是否全部files发送到服务器。

下面是我的代码：

var filesUploadList = [];

function initializeMultipleFileUpload(){
    fileList.forEach(function(obj){
    
         $('input[data-id="'+obj.identifier+'"]').fileupload({
              url: 'https://jsonplaceholder.typicode.com/posts',
              autoUpload: false,
              maxChunkSize: 10*1024*1024, // 1MB
              maxRetries: 10,
              dataType: 'json',
              multipart: false,
              sequentialUploads: true,
              replaceFileInput: false,
              progress: function(e,data){
                  console.log('Progress for file Name:  ',data.data.name);
             },
          }).on("fileuploadadd", function (e, data) {
              filesUploadList.push(data.files[0])
          });
          
    });
}

var fileList = [
     {'fileNo':1,identifier:111},
     {'fileNo':2,identifier:222},
     {'fileNo':3,identifier:33}
];
var inputFileStr = '';
for(var i = …