我正在尝试使用Blueimp的jQuery-File-Upload插件,该插件根据演示看起来很有前途.

这很容易实现:

var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] />
$uploadButton.fileupload({
    url : "//domain/path/to/receive-uploaded-files"
});

所选文件上传正常,无需按预期刷新页面,但当然使用这样的最小配置,用户将不会收到任何通知.这是插件的回调会派上用场的地方.

根据文档,有两种方法可以定义回调.例如,add事件(在选择上传文件时触发)可以在原始配置对象中添加,如下所示:

$uploadButton.fileupload({
    add : addFileListener,
    url : "//domain/path/to/receive-uploaded-files"
});

或者:

$uploadButton.bind("fileuploadadd", addFileListener);

但是我发现只有第一种方法有效,第二种方法没有做任何事情.

这是更奇怪的是,没有其他的回调-尤其是progress和start-似乎没有射击不管我如何将它们绑定:

$uploadButton.fileupload({
    add : addFileListener,
    progress : progressListener,
    start : startListener,
    url : "//domain/path/to/receive-uploaded-files"
});

要么

$uploadButton.fileupload({
    add : addFileListener,
    url : "//domain/path/to/receive-uploaded-files"
});
$uploadButton.bind("fileuploadprogress", progressListener");
$uploadButton.bind("fileuploadstart", startListener");

我定义了引用的侦听器函数,并且代码不会报告任何错误或警告.

该.bind方法失败的原因是什么？为什么听众progress或start听众没有激活？

这个问题让我有点疯狂.我正在尝试通过AJAX POST将文件上传到S3存储桶.

我的所有凭据都是正确的,因为当我执行正常的HTTP POST时,它会在S3存储桶中创建资源.但我真的想用进度条一次上传多个文件,因此我需要AJAX.

我的S3存储桶上有CORS设置:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://localhost:3000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

现在我只是想在我的开发环境中使用它(localhost:3000,使用标准的Rails 4.1).

根据我的理解,上面的CORS规则应该允许从localhost:3000到S3存储桶的AJAX请求.

但是,每次我通过AJAX提交文件时,都会收到以下错误:

XMLHttpRequest cannot load https://s3.amazonaws.com/<BUCKET>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

这对我没有任何意义,因为localhost:3000 IS通过CORS规则被授予访问权限.

我还提供了一个我用来提交表单的JS片段:

  $.ajax({
    method: "POST",
    crossDomain: true,
    url: "https://s3.amazonaws.com/<BUCKET>",
    data: $(this).serialize() # Contains S3 necessary values
  })

表单包含必要的Amazon S3密钥/ etc的输入.我知道它们有效,因为当我执行正常的HTTP POST时,它会在S3中正确创建资产.我所要做的就是AJAXify这个过程.

我错过了一些明显的东西吗？

使用:Rails 4.1,jquery-file-upload,雾宝石(适用于S3)

我试图在我的网站上使用jQuery文件上传插件,但目前它是不可能的,文档是我见过的最糟糕的.我能看到的唯一的东西是一些带有大量代码的演示文件,没有任何解释.

我试图在我的网站中使用它,演示中包含CSS和JS文件,但文件上传插件没有按照它应该呈现.

经过一番研究,我发现永远不会调用jquery.fileupload-jquery-ui.js的_renderUpload方法.也没有_create相同文件的方法.这些方法负责添加CSS类,以便文件上传看起来更好.

这是我的HTML代码:

<div class="fileupload-buttonbar">
    <div class="fileupload-buttons">
        <span class="fileinput-button">
            <span>Agregar archivo...</span>
            <input type="file" name="files[]">
        </span>
        <button type="submit" class="start">Importar</button>
    </div>
    <div class="fileupload-progress fade" style="display:none">
        <!-- The global progress bar -->
        <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
        <!-- The extended global progress information -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>              
<table role="presentation"><tbody class="files"></tbody></table>

这是初始化:

$(function () {
            $('#fileupload').fileupload({
                url: '@Url.Action("Import")',
                disableImageResize: false,
                maxFileSize: 30000,
                acceptFileTypes: /(\.|\/)(csv|txt|xls|xlsx)$/i,
                singleFileUploads: true,
                autoUpload: false,
                maxNumberOfFiles: 1,
                change: function (e, data) {
                    alert(data.files.length);
                    $.each(data.files, function (index, file) {
                        $('#import_file').text(file.name); …

我正在构建一个允许同时上传大量照片的应用程序,并想知道解决此问题的最佳设置.

这是我到目前为止使用的:

• Jquery文件上传:允许用户拖放图像
• CarrierWave:使用ImageMagick处理图像并调整其大小
• Amazon S3:CarrierWave通过Fog将图像上传到Amazon S3
• Heroku:用于托管

我想允许用户能够将大量图像拖放到页面上,然后在后台进行上传时导航到其他页面.我还想在完成上传时显示图片.我不希望这个过程锁定Heroku dynos,所以我可能需要将工作转移到后台工作,但我不确定该用于我的情况.

这类应用程序的最佳设置是什么？我应该使用什么背景工人宝石？Cloudinary是个好主意吗？

我使用jquery文件上传插件(基本)一次上传单个文件.插件工作正常,我可以看到文件转储到正确的目录,一切都很好!但是,当我选择文件时,不会显示所选文件的名称(Chrome)/路径(IE),而只会显示"未选择文件".如何更改它以显示所选文件的名称？我的代码:

脚本:

$(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: '@Url.Action("Index", "Home")',
                add: function (e, data) {
                    data.submit(); 
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css('width', progress + '%');

                },
                done: function (e, data) {
                    $('<p/>').text(data.files[0].name).appendTo(document.body);                        
                }
                //multipart: false
            });               

        });

HomeController:

[HttpPost]
    public ActionResult Index(HttpPostedFileBase files)
    {           
        return Json(files.FileName);
    }    

指数:

<input id="fileupload" type="file"  name="files"/>
<div id="progress" style="width: 250px">
    <div class="bar" style="width: 0%;"></div>
</div>

我遇到了一个奇怪的情况,一些文件,特别是ZIP格式,在我的Rails应用程序中上传到AWS时被破坏/转换.下载和解压缩后,它们会变成CPGZ格式,它会解压缩回ZIP,并无限制地执行此操作.

我没有注意到导致这种情况的模式,所以它看起来很零星,并且可以在上传之前确认文件没有损坏.我在此发现的唯一其他问题/主题与PHP有关,并且似乎是不同的情况.

我正在使用AWS SDK for Ruby v1(因为我的Rails版本而不是v2)和jQuery-File-Upload.由于某些文件很大,我使用的是分块上传.

在我的控制器中,预先设定的POST URL是这样创建的:

S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}-${filename}", success_action_status: '201')

并且jQuery文件上传设置如此(为简洁起见,删除了一些部分):

this.$el.fileupload({
  fileInput: this.uploadField, // this is an <input type="file">
  url: this.awsURL, // https://BUCKET.s3.amazonaws.com/
  formData: JSON.parse(this.awsData), // {"AWSAccessKeyId":"...","key":"uploads/1234-${filename}","policy":"...","signature":"...","success_action_status":"201"}
  type: 'POST',
  autoUpload: true,
  paramName: 'file',
  dataType: 'XML',
  replaceFileInput: false,
  maxChunkSize: 1000000,
  add: function(event, data) {
    var file = data.files[0];
    var fileType = file.type;

    // Check file type
    if (~'ai sketch psd jpg jpeg png zip ttf woff eot gif'.indexOf(fileType.toLowerCase())) {
      return alert('Sorry, …

我使用jQuery文件上传库(http://github.com/blueimp/jQuery-File-Upload),我一直停留搞清楚如何利用图书馆满足以下条件.

• 该页面具有由表单标记包围的多个文件输入字段.
• 用户可以将多个文件附加到每个输入字段
• 单击按钮时,所有文件都将发送到服务器,而不是在将文件附加到输入字段时.
• 上传是异步完成的
• 假设页面有3个输入字段,其名称属性为"file1 []","file2 []"和"file3 []",请求有效负载应该像{file1:[file1 []上的文件数组],file2 :[file2 []]上的文件数组,...}

这是jsFiddle,它到目前为止表现得很奇怪,因为它发送了两次post请求,第一个被取消了.

更新

现在感谢@CBroe的评论,请求发送两次的问题是固定的.但是,请求参数的键未正确设置.这是更新的jsFiddle.

http://jsfiddle.net/BAQtG/27/

js代码的核心部分看起来像这样.

$(document).ready(function(){
    var filesList = []
    var elem = $("form")
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0])
    });

    $("button").click(function(){
        file_upload.fileupload('send', {files:filesList} )
    })

})

任何人都知道如何让这个工作？

我正在使用jQuery文件上传插件(http://blueimp.github.io/jQuery-File-Upload/)为我的网站上传图片.我浏览了一下(https://github.com/blueimp/jQuery-File-Upload/wiki/Options),但是我没有找到分配元素来显示图像的设置.那么,如何使用此插件在网页上预览图像？

谢谢.

$('#fileupload')
    .fileupload({
        acceptFileTypes: /(\.|\/)(jpg)$/i
    })
    .on('fileuploadadd', function (e, data) {
        console.log(data.files.valid); //undefined
        setTimeout(function () {
            console.log(data.files.valid); //true or false
        }, 500);
    })
;

jsFiddle

如何在data.files.valid没有超时的情况下获取属性的布尔值？

我在提交文件上传表单时找到了有关如何添加其他表单数据的解决方案.如果没有要上传的文件,此问题是如何上传其他数据.

我在任务管理应用程序中使用blueimp jquery-file-upload,以便拖放文件并将它们附加到任务.

该脚本已初始化并设置为在附加文件时不自动上载.在fileuploadadd回调中,我附加data.submit()到我的submit事件处理程序.这实现了我们在一个POST请求中提交任务数据和文件.

在添加文件之前,我无法访问文件上传data以使用该data.submit()功能.我想通过在页面加载时添加一个空文件(然后删除它)来解决这个问题,这会触发绑定data.submit()到提交按钮.问题是插件在尝试循环遍历空文件数组时返回错误.如果您在提交表单之前添加了一个文件然后将其删除,也会出现此问题.

我一直在寻找一个解决方案,并且看起来高低,但在(恕我直言)可怕的文档中找不到任何东西.

看看我的代码如下:

    $('#post_task').fileupload({
        autoUpload: false,
        singleFileUploads: false,
        disableImagePreview: true,
    }).on('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            var filename = file.name,
                filesize = bytesToSize(file.size) 
                ext = filename.substr(filename.lastIndexOf('.')+1,5),
                icon = '<i class="sprite_file sprite_file-file_extension_'+ext+'"></i>',
                node = $('<li/>').append($('<span/>').html(icon + filename + ' ' + filesize + '<a href="#">&times</a>')).attr('data-index',index);

            node.find('a').click(function(e){
                e.preventDefault();
                var $self = $(this),
                    $listItem = $self.parents('li'),
                    listIndex = $listItem.attr('data-index');
                $listItem.remove();
                $('#files li').attr('data-index',function(index){return index;}); …