标签: jquery-file-upload

我正在使用jQuery文件上传并将maxNumberOfFiles设置为1.但是,它一次允许多个文件.文件陈述......

The maxNumberOfFiles option depends on the getNumberOfFiles option, which is defined by the UI and AngularJS implementations.

没有关于该主题的进一步文件.getNumberOfFiles只是一个你可以传入的函数.

这是我的......

$('#fileupload').fileupload({
                maxNumberOfFiles: 1,
                getNumberOfFiles: function () { return 1 }
});

有没有人有maxNumberOfFiles选项工作？

我在Rails4应用程序中实现了一个JQuery文件上传.当我从浏览器手动测试文件上传时,文件上传工作,但我的测试失败了.

以下是我对JQuery文件上传的规范:require'pec_helper'

feature 'Evidences' do
  context "as an assessor user" do
    let!(:assessor) { User.make! :assessor }
    let!(:assessment)  { Assessment.make! }

    background { sign_in assessor }

    scenario "it uploads evidence", js: true do
      evidences_count_before_upload = assessment.evidences.count
      visit edit_assessment_path(assessment)

      path = "#{Rails.root}/spec/fixtures/files/sample1.doc"
      attach_file 'evidence_file_url', path

      expect(assessment.evidences.count).to eq(evidences_count_before_upload + 1)
    end
  end
end

我正在使用RSpec 2,Capybara 2和Poltergeist来实现此功能规范.

使用Jquery文件上载.它正在"工作"并上传图像和显示拇指.但是当我在处理程序中提交表单时,如果我转储$ _FILES那里什么也没有.

我基本上使用的是Basic Plus示例,其中autoUpload设置为false.我希望我能够使用它来让用户选择多个图像.然后在提交表单后上传它们并处理它们基本上与处理它们的方式相同,如果我在页面上有X个文件上传按钮.

使用autoUpload = TRUE上传它们也可以.我尝试过,在POST或FILES中也没有看到任何内容.

获得任何一种方法的评论都会很棒.

这是我的下面的js.

$('#fileupload').fileupload({
    url: url,
    method: 'POST',
    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));
        node.appendTo(data.context);
    });
}).on('fileuploadprocessalways', …

以前的样式问题:http://pastebin.com/cr432nLQ

我决定重新解释有关这个问题的整个问题,并尽可能彻底地进行.您可以在上面的粘贴中阅读之前提出的问题.

首先,感谢大家的回应,但不幸的是,他们让我无处可去.我仍然需要帮助解决我的问题.

所以,我正在使用一个名为blueimp jQuery File Upload的jQuery插件,它非常好地处理异步文件上传,它包含很多选项.该插件对我的目的来说足够好,但是我需要执行此服务器端检查以便从滥用用户中保存自己.我在谈论限制一次发生的上传次数.

默认情况下,插件的工作方式如下:用户选择多个文件(或将它们放到放置区),每个文件创建一个单独的XHR实例,然后调用我的upload.php脚本,该脚本负责存储文件.PHP上传脚本处理XHR请求,好像它只是一个图像,所以基本上,每个需要上传的图像都会upload.php单独调用脚本.

我允许上传用户的是图片.不过,我想一些限制上传数适用于10为免费用户和20为付费用户.这可以通过Javascript完成,是的,但我真的不相信Javascript这种验证,因此我正在寻求服务器端验证.但是,怎么样？这是完全不可能(至少对我来说)安全地完成.我需要以某种方式确保在我的上传脚本中用户没有超过10(或20)图像上传限制.

我发现这个jQuery插件有这个选项命名singleFileUploads:

默认情况下,使用针对XHR类型上载的单独请求上载选择的每个文件.将此选项设置为false可在每个请求中上载文件选择.

注意:使用一个请求上载多个文件需要将multipart选项设置为true(默认值).

• 输入:boolean
• 默认: true

这完全符合我的需要 - 发送一个完全填充的$_FILES数组,包含所有提交的图像上传.但我仍然看到这个问题.这仍然是由Javascript本身决定的.一个用户可以修改这部分脚本,并设置singleFileUploads到false一次吗？我想他们可以!如果他们不能,那么现在就回答这个问题 - 但我不知道.

下面有一个答案表明使用Apache mod_qos限制图像上传数量,但我不知道如何使它与两种不同的用户类型(免费和高级)不同.

请注意,客人也可以上传图片,并且免费用户限制应适用于他们.

那么我对这一切做了什么尝试？

我已经尝试创建一个会话的解决方案来跟踪用户上传的内容,并且对于每个新的上传,会话的值将增加一个 - 一个不够安全的解决方案,如下所示,因为cookie可以被清除.除了这个尝试,我无法从下面的答案中应用任何东西.

这个问题

那么,问题是从一开始就非常明确:我如何限制并发图像上传的数量以10为客人提供/免费用户和20至高级用户安全？

编辑:我想值得一提的是,每个上传的图像在数据库中都有自己的行,上传时间和名称.也许这可以帮助!

谢谢.

我正在使用jQuery Fileupload上传文件.它不发送我设置到服务器的标头.为什么Authorization标头仅在IE中缺失但在chrome中传递？

这是代码:

upload_photo: function(){
  var url =  '/api/v1/upload';
  $('#photoupload').fileupload({
      url: url,
      dataType: 'json',
      paramName: 'uploadFile',
      beforeSend: function ( xhr ) {
          setHeader(xhr);
          $("#check_progress").html('true');
      },                    
      done: function (e, responseJSON) {
          var id = responseJSON.result.id;
          url = responseJSON.result.url;
          var photo_ids = $("#photo_ids");
          var val = photo_ids.val();
          photo_ids.val(val + id.toString() + ",");
          $(".photothumb-wapper").append('<div class=\"photothumb\" id="post_photo_'+id+'"><div><img  src=\"'+url+'\" /></div><img class=\"thumb-delete photo_delete\" id=\"'+id+'\" title=\"Remove\" src=\"/assets/delete-red.png\"></div>');
          $("#check_progress").html("");
      },
      start: function (e, data) {
          $(".photothumb-wapper").append('<div class="photothumb photoprogress" style="border:none"><img src="/assets/ajax-loader.gif" /></div>');
      }, …

我正在尝试为jquery文件上传取消按钮(http://blueimp.github.io/jQuery-File-Upload/).

我的代码:

var jqXHR = $('#fileupload').fileupload({
url: 'server/index.php',
dataType: 'json',
dropZone: $('#dropzone'),
})

$('button.cancel').click(function (e) {
    jqXHR.abort();
    alert("cancel");
});

当我点击取消按钮时,取消按钮不起作用,我得到"jqXHR.abort不是一个功能"错误.

取消按钮取消文件上传工作需要做什么？

我正在使用Blueimp的jQuery-File-Upload插件(基本版),我有一个问题.第一个文件上传按预期工作,但是当我想发送另一个文件时它无法正常工作.

fileinput.fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    //do stuff with files
                });
            }
        }).bind('fileuploadadd', function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();

        });

编辑:

好的我知道是什么导致了问题.但我不知道如何解决这个问题.我在已设置display none的输入上使用了fileupload插件.我用另一个按钮触发它,该按钮在隐藏输入上使用click()/ trigger('click')方法.第一个触发器工作正常,但第二个触发器选择文件对话框.选择什么都没发生.当我直接使用输入字段时,它可以正常工作.如何克服这个问题？

我有一个使用JQuery-File-Upload插件的问题.我直接使用插件而不是通过作者提供的html示例页面.基本上我有一个带有一些输入的表单,其中一个是文件输入.第一次上传工作正常,但是当我尝试第二次上传时,两个文件都被发送(第一次是第一次),而它应该只是第二次上传.

例:

• 选择文件1.
• 文件1已上传.
• 成功.
• 使用jquery我用$(FORM_SELECTOR).trigger('reset')重置表单
• 选择文件2.
• 文件1和文件2已全部上传.
• 问题.

现在我有两份文件1.这不是我想要的.

显然使用ajax表单上传没有多大意义,如果它只运行一次,所以我认为有一些我缺少的东西.

有没有办法重置文件队列？

检查data.files对象时,我可以看到表单重置后文件就在那里.我该怎么做才能将插件与输入同步或清除data.files.如果我手动清除data.files数组(通过pop或data.files = []),尝试第二次上传不起作用.

我初始化上传表单如下:

    $('#file-upload-form').fileupload({
    url: 'uploads/upload',
    type: 'POST',
    dataType: 'json',
    multipart: true,
    dropZone: null,
    formAcceptCharset: 'utf-8',
    autoUpload: true,
    add: function (e, data) {
        fileUploadData = data;
        $("#upload-file-btn").click(function () {
            data.submit()
                .success(function (e, status, data) {
                    console.log("success response from post", status, data);
                    var i = '<input id="file-select-input" name="files[]" multiple/>';
                    $('#file-select-input').replaceWith(i);
                })
        });
    }
});

我从这里的版本9.12.1 下载了最新的插件和依赖项.我将下载的文件复制到我的wamp服务器中,并从localhost/jQuery-File-Upload-9.12.1/index.html访问它.

选择图像文件后,在上传之前会显示图像预览.但是一旦上传图像,缩略图就不会显示出来.

但是在Inspect Element中,缩略图的链接出现在图像src中.

文件上传到服务器文件夹并创建缩略图.

显示图像的名称和大小.

我究竟做错了什么 ？

我有这个JavaScript代码:

$("#uploadFile").fileinput({
    uploadUrl: url,
    maxFilePreviewSize: 10240,
    allowedFileExtensions: ["xls", "xlsx", "csv"],
    maxFileCount: 1,
    language: 'es',
    theme: 'gly',
    autoReplace: true,
    maxFileSize: 4096,
    required: true,
    browseOnZoneClick: true
});

$('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form,
      files = data.files,
      extra = data.extra,
      response = data.response,
      reader = data.reader;
    DisplayResults(response);
});

bootstrap-fileinput有效,但在处理时没有显示进度.它仅显示上传文件时完全绘制了"处理..."文本的进度条,并在POST返回时更改为"完成"文本.

我正在使用这个插件:http://plugins.krajee.com/file-input

如何设置进度条以显示进度百分比？文件实际上传和文件处理时？