jQuery-File-Upload 使用文档(翻译)

最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些.

使用文档

插件的基本信息

• 插件demo
  https://blueimp.github.com/jQuery-File-Upload/
• 插件配置
  官方文档:https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

配置指令

提示:

尽管资源库的演示包含了远程服务的源文件,但是还是建议使用的时候将它们下载上传到自己的服务器上.这是比github demo界面更可靠的来源

在PHP网站上使用jQuery文件上传(UI版本)

1.如果你的网站是php,那么使用我们提供的插件只需要一步.下载并提取它,然后将提取的文件夹放到你自己的项目里.
访问你下载的目录 你应该可以看到和demo一样的功能,可以上传文件到你的网络.
如果插件并不能顺利使用,请确认你的php目录允许你的服务器请求访问.

node.js使用file upload

你可以导入安装一个节点,node.js通过via在您的服务器上传服务.(node.js和via都是类似于github的开源社区,不过使用上有点不一样,感兴趣可以自己看一下.node官方网站:https://nodejs.org/en/ via官方网站:https://www.npmjs.com/)
你可以通过下面的代码来运行服务

./node_modules/blueimp-file-upload-node/server.js

然后下载插件文档,提取出来后,将main.js文件中的url设置为你自己的url(例如:http://localhots:8080)
然后你可以上传你的项目文件(不要放没用的服务器文件夹)到任何静态服务器上并且使用它.

使用一个定制的服务器端上传处理程序(jQuery)

1.在您的项目中要实现文件上传处理的功能(Ruby.Python.Java等),它处理基于表单的文件上传.并将其上传到您的服务器.具体请参阅文档主页的教程.(具体的使用会在后边更新翻译,大概的看了一眼java的,官网地址:https://github.com/blueimp/jQuery-File-Upload/wiki)
2.下载并解压下载插件.
3.修改main.js并且将url设置为你自定义的文件上传路径.或者你可以删除url,然后通过html编辑,将html表单的动作属性调整到你自定义的文件上传的url.如果你的上传需要另一个参数名字,那么你就需要调整文件输入名属性或者设置paraName选项.
4.将插件目录上传到你的网址.
5.返回的值是json类型的

{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "url": "http:\/\/example.org\/files\/picture1.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
    "deleteType": "DELETE"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "url": "http:\/\/example.org\/files\/picture2.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
    "deleteType": "DELETE"
  }
]}

如果想返回错误信息,那么在对象中加入错误信息相关的属性就可以了.

{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "error": "Filetype not allowed"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "error": "Filetype not allowed"
  }
]}

如果需要使用删除按钮来删除文件,请求如下:

{"files": [
  {
    "picture1.jpg": true
  },
  {
    "picture2.jpg": true
  }
]}

注意即使是只上传了一个文件,响应也是种是一个包含数组的json对象.
然后你应该可以看到和demo中一样的文件上传,允许你讲照片上传到你自己的网络上.

注意事项和其他相关探讨.

插件使用的是Iframe传输模块,用于像Microsoft Internet Explorer和Opera这样的浏览器，不支持XMLHTTPRequest类型文件上传。
基于iframe的上传需要为json响应提供tex/plain或者text/html的内容类型,如果ifame的响应被设置为application/json,那么它们讲提示一个不需要下载的对话框.
你可以使用Accept表头来为文件上传响应提供不同的内容类型,下面是接受content-type变更的php代码事例:

ruby事例:

def update_attachment
  name  = params[:attachment_name]
  style = params[:attachment_style]
  image = params[:user][name]

  raise "No attachment #{name} for User!" unless User.attachment_definitions[name.to_sym]

  current_user.update("#{name}" => image)
  render(json: current_user.to_fileupload(name, style), content_type: request.format)
end

render 中的 content-type属性,为ie和其他浏览器设置了正确的标头
为了记录,这是to_fileuoload方法:

def to_fileupload(attachment_name, attachment_style)
  {
    files: [
      {
        id:   read_attribute(:id),
        name: read_attribute("#{attachment_name}_file_name"),
        type: read_attribute("#{attachment_name}_content_type"),
        size: read_attribute("#{attachment_name}_file_size"),
        url:  send(attachment_name).url(attachment_style)
      }
    ]
  }
end

如果只是想使用最基本的插件那么请看这些
官方文档:https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

基础插件

下载的插件包含了一个基于bootstrap的完整用户界面.
如果你想使用自己的界面,是可以使用最基本的插件的.
html中只有最低限度的需求和简单的回调处理(可以参考API来参考使用不同的回调选项)

响应数据类型.

使用的例子都是讲数据类型设置为json,希望服务器为每一个上传文件返回一个json响应,但是恶意处理html内容将响应转换为其他类型,也可以在完成处理的方法处理数据类型.

如何在基本的上传文件插件中显示上传进度.

fileload插件触发个人上传和所有上传的季度时间,事件处理程序可以通过绑定按钮之类的(参考api文档)

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

前边的代码使用内部元素来显示进度节点,节点通过百分比来显示进度状态:

可以通过css文件设置不同的背景颜色和进度条类型.

.bar {
    height: 18px;
    background: green;
}

异步处理

通常情况下,可以再add callback中完成回调,为了能达到异步处理的效果,你可以使用context属性(实际是jquery.ajax的属性 官网:http://api.jquery.com/jQuery.ajax/)

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('
').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

如何通过点击按钮上传

根据前边的例子,是可以用点击按钮上传来代替自动上传的

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('
').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

客户端图像大小的调整.

如果想调整客户端图像大小,你需要引入以下文件:

然后你要做的就是将disableImageResize 设置为false
默认图片大小为1920*1080,你可以更改它的属性

$('#fileupload').fileupload({
    url: '//jquery-file-upload.appspot.com/',
    dataType: 'json',
    // 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 && navigator.userAgent),
    imageMaxWidth: 800,
    imageMaxHeight: 800,
    imageCrop: true // Force cropped images
})