标签: jquery-file-upload

我正在尝试关注jQuery-FileUpload上的Railscasts剧集.我已经添加

gem 'jquery-fileupload-rails' 

到了资产组Gemfile,还加了

//= require jquery-fileupload/basic

line到application.js资源目录中的文件.但是,当我尝试调出网站时,会显示以下错误:

couldn't find file 'jquery-fileupload'
  (in root/app/assets/javascripts/application.js:15)

任何帮助将不胜感激.

我正在使用blueimp文件上传插件上传文件.有一个示例正则表达式只限制上传到图像:

var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;

如何更改此内容以上传图像文件以及PDF,TXT,DOC等文档？

这个插件有很多选项(jquery-file-upload),文档看起来不错,但我还是有点困惑.我的表格看起来像:

<form id="fileupload" action="/file-upload" method="POST" enctype="multipart/form-data">
    <div class="form-buttons">
    <span id="add-files-wrap">
        <span>Add Files</span>
        <input id="add-files-btn" type="file" name="files[]" multiple>
    </span>
    <button id="upload-btn" type="button" onclick="uploadFiles()" class="btn-disabled">
        <span>Start Upload</span>
    </button>
    </div>
</form>

添加一个或多个文件时,add会触发fileupload intialiser中的回调:

$('#fileupload').fileupload({
url: '/file-upload',
sequentialUploads: true,
add: function(e, data) {
    $.each(data.files, function(idx, file) {
            MY_FILES.push(file);
        }
    }
});

然后单击表单中的上传按钮:

function uploadFiles() {
for (var i=0; i<MY_FILES.length; i++) {
        // Submit the file - how ???
    }
}

我想一次一个地提交/发送每个文件,每个文件使用单独的请求.我知道我可以这么做,fileupload('send', {files: MY_FILES})但是我希望有一个回调,这个回调是从请求的每个成功响应中触发的.我对文档中的所有回调选项感到困惑.

编辑:
回答了我自己的问题.

我的任务是将图像上传到远程服务器并将这些图像保存在本地。通过 JSON 进行 Base64 传输并使用 Node.js 进行存储非常容易。但是，是否有理由不使用这种类型的文件上传，而使用AJAX或其他方式呢？（据我所知，除了 30% 的带宽增加之外。您仍然可以将其包含在您的答案中，以使其完整）。

我在Jquery文件上传上有这一行:

'accept_file_types' => '/.+$/i',

如何修改它以便它接受除PHP和Javascript文件之外的所有文件类型？

在这个插件中,我们可以设置文件上传的各种条件/限制(例如acceptFileTypes,maxFileSize,maxNumberOfFiles等).

无论何时添加文件,都会触发一个事件" fileuploadadd ",一旦成功添加文件,另一个事件将被触发" fileuploadadded ".

但是,当添加文件并且它失败了这些条件/限制之一(例如,用户尝试上传2GB文件,或文本文件而不是图像)时,无法以编程方式找出已发生这种情况.

当此条件失败时,不会触发任何事件.我可以使用什么来检查用户选择的文件是否有错误,因此尚未添加到队列中.

我能想到的唯一方法就是触发" 添加 "事件并等待,看看它是否不会触发" 添加 "事件然后出现问题.但是,我既不想长时间停止所有处理,也不想太快检查" 添加 "事件是否已经触发.

要么

任何人都可以指导如何从这个插件中抛出自定义事件(例如fileaddfailedevent)？

我有这样的观点(形式偏):

= javascript_include_tag 'car_photos'
= stylesheet_link_tag('jquery.fileupload-ui')
= form_for @car do |f|
  - if @car.errors.any?
    #error_explanation
      %h2= "?????? ? ?????: #{pluralize(@car.errors.count, "error")}"
      %ul
        - @car.errors.full_messages.each do |msg|
          %li= msg
  .tab#car-data{style: "height: 1290px;"}
    .field
      = f.label :manufacturer_id, "?????"
      = f.select(:manufacturer_id, options_from_collection_for_select(VehicleManufacturer.all, :id, :name, @car.manufacturer_id), {}, :prompt => "???????? ?????", required: true, id: "manufacturer-select")
    .field
      = f.label :model_id, "??????"
      #models-area
        = render :partial => 'models', :object => @models
    .actions
      = link_to '??????? ? ???????? ??????????', "", id: "go-and-load-photos", remote: true
  .tab#car-photo{style: "height: 1290px;"} …

我尝试为头像图像创建拖放功能.我想要有人拖入盒子的文件; 上传到目录:'/ images/profile/$ username'.

这是我的代码:

<div class='fileDrop'>
    <span id='fileDropTarget'>Drag your files here</span>
</div>

<script>
    function fileSetUploadPercent(percent) {
        var uploadString = "Uploaded " + percent + " %";
        $('#fileDropTarget').text(uploadString);
    }

    function fileUploadStarted(index, file, files_count) {
        fileSetUploadPercent(0); //set the upload status to be 0
    }

    function fileUploadUpdate(index, file, currentProgress) {
        var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress;
        $('#status').text(string);
        fileSetUploadPercent(currentProgress);
    } …

所以我可以通过http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud#face_detection_based_thumbnail中基于表单的方法将图像上传到Cloudinary ,但是当我尝试扩充现有文件输入时,它会给我进度说文件正在上传,但是错误说明文件丢失了.

{"error":{"message":"Missing required parameter - file"}}

js代码是:

Template.fileUpload.created = function () {
    $.cloudinary.config({
      cloud_name: "theCloudName"
    })
  };

  Template.fileUpload.rendered = function () {
    var fileUploadCallback = function(err, result){
      if(err){
        console.log("Error: " + err.reason);
      }else{
        console.log("Success: " + result);
      }
    };

    $('input').unsigned_cloudinary_upload("discussionAdd", {
      cloud_name: 'theCloudName',
      tags: 'discussionAdd'
    }, {
      multiple: true
    }).bind('cloudinarydone', function (e, data) {

        $('.thumbnails').append($.cloudinary.image(data.result.public_id, {
          format: 'jpg',
          width: 150,
          height: 100,
          crop: 'thumb',
          gravity: 'face',
          effect: 'saturation:50'
        }))
      }
    ).bind('cloudinaryprogress', function (e, data) {
      console.log("data loaded …

我无法通过AJAX从我的网络客户端上传文件到我的服务器.我在客户端使用以下jQuery库来进行文件上传:https://github.com/hayageek/jquery-upload-file

In the server-side, I'm using Spring Framework and I have followed the following Spring Tutorial to build my Service: https://spring.io/guides/gs/uploading-files/

At first, my server method looked like this (file was defined as @RequestParam):

@RequestMapping(value="/upload", method=RequestMethod.POST)
public @ResponseBody String handleFileUpload(@RequestParam("file") MultipartFile file){
    //functionality here
}

but every time I submitted the Upload form I got a Bad Request message from the Server, and my handleFileUpload() method was never called.

After that, …