Bootstrap file-input中文文档(3)
in 前端 with 0 comment

Bootstrap file-input中文文档(3)

in 前端 with 0 comment

Ajax上传

你需要设置服务器方法来解析并且返回正确的响应经由ajax,你能设置同步上传或者异步上传模式正如下面所描述的。

异步上传:

这是默认的模式,通过把uploadAsync属性设置为true。当上传多个文件的时候,这个异步模式允许对每个文件触发平行的服务器请求。你能够控制文件上传数量的最大数在同事上传通过设定maxFileCount属性,在异步模式下,在预览框里的每个略缩图的进度条是有效的而且更新的。

收到数据(服务器端)

你的服务器方法应该如uploadUrl里设置的一样

从本插件收到下面的数据

  1. 文件数据:这个被发向服务器的数据在一个非常普通的表单file
    input格式,比如在php中,你可以读取这个数据如:$_FILES['input-name'],input-name是你input标签的name属性。如果你不给你的input标签设置一个name属性,那么它默认是file_data。提示:多个文件上传时需要你设置input标签的multiple属性为true,这样在php里你可以接受文件数据如$_FILES['file_data']。

  2. 额外数据:本插件能够想你的服务器发送额外的数据。这个能够通过设置uploadExtraData来完成。如一个键值对的关联数组对象一样。所以如果你有设置uploadExtraData={id:'kv-1'},在php中你可以读取这个数据如$_POST['id']。

提示:在异步模式下,你一定会在你的服务器经由ajax上传收到单个文件。基本的,本插件会为每个被选择上传的文件触发平行ajax请求,你需要根据

这个写你的服务器上传逻辑,这样才能读取并且上传一个文件。相似的,在下面的发送数据章节,你必须仅为单个文件接收返回一个initialPreview来反射数据


发送数据(服务器端)

你的服务器地址应该如uploadUrl属性里设置的一样,而且必须发回一个json对象数据,在这个条件下,你能够发送这4条信息,标明在异步模式下,你将会受到一个文件记录来自服务器,所以根据这个调整你的代码

·error:字符串,这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。举例来说,这个来自服务器的响应该像这样发送{error: 'You are not allowed to upload such a file.'}。提示:这个插件会自动的生效并且显示ajax异常错误。

·initialPreview数组,图像文件地址列表或者任何html标记来指出你的上传文件。你应该发送在这个数组中发送一行,因为你应该收到一个文件在异步上传模式。如果这个属性被设置了,本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreview option setting 。举个例子:

initialPreview:[
    '<img src='/images/desert.jpg' class='file-preview-image' alt="Desert' title="Desert'>',
],

initialPreviewConfig:数组,这个配置来对每个文件标记在initialPreview里面确认属性。你应该发送一行在这个数组中,因为你应该会受到一个文件在异步上传中,如果这个属性被设定了,本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreviewConfig option setting ,举个例子

    initialPreviewConfig:[{
        caption:'desert.jpg',
        width:'120px',
        url:'http://localhost/avatar/delete',// server deleteaction
        key:100,
        extra: {id:100}
    }]

initialPreviewThumbTags:数组,一个对象的数组,与替换标签相对应,这个初始化预览缩略图设置经由initialPreview将会读取这个配置来替换标签

    // changethumbnail footer template
    // set initialpreview template tags
    initialPreviewThumbTags:[{
        '{CUSTOM_TAG_NEW}':' ',
        '{CUSTOM_TAG_INIT}':'lt;spanclass=\'custom-css\'>CUSTOM MARKUPlt;/span>'
    }]

·append:布尔值,如果你在初始化的时候已经设置了一个initialPreview ,不滚你是否向initialPreview添加这个内容。如果没有设置这个,默认值是true,如果设置成false,本插件会复写initialPreview 的内容。

重要:你必须从你的服务器发送一个有效的的json响应,否则这个上传进度会失败,即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}

为了捕获和显示一个有效的错误,你的json相应数据必须包含error键,而且他的value必须是错误html标记来显示,这个应该像正如上面提及的那样来设置

利用fileuploaded事件,你能处理额外的json发来的数据来实现进一步的功能。


同步上传

在这个模式下,uploadAsync属性应该被设置成false,这将会触发一组给服务器的上传请求,并且从客户端以一个数组的方式发送文件到服务器。甚至在这个模式下,你能够通过设置maxFileCount属性来控制文件一次能够被允许上传的最大数量。但是,在同步模式,进度条仅能按照一整个运行,每一个在预览区域的缩略图的进度条不会确切的有效和更新。但是,本插件提供给你了一个方法来对每个文件进行识别上传错误。

收到数据(服务器端)

你的服务器必须与uploadUrl里设置的地址一样,从本插件收到下面的数据:

  1. 文件数据:这个数据很像表单file
    input发送给服务器的。比如在php中,你可以读取这个数据以$_FILES['input-name'],其中input-name是你的input标签里面的name属性。在异步模式中也有这个。如果你不给你的input标签设置一个name属性,则name默认是file_data.你必须以数组的形式设置name属性,正如在本网站tip里提到的那样,而且要设置multiple属性为true。如果你没有以数组的格式设置你的name属性,你会在你的服务器上只收到一个文件。(正常情况下)在php里你会收到文件如$_FILES['input-name'],而且这将是一个文件对象数组。

  2. 额外数据,本插件能够想你的服务器发送额外数据,通过设置uploadExtraData属性为一个键值对关联数组可以实现。所以如果你设置uploadExtraData={id:'kv-1'},在php中你能读取这个数据如$_POST['id'];

发送数据(从服务器)

在异步模式下,服务器必须以json格式发送数据回来,你应该发送这5条信息:

·error:字符串,这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。

`errorkeys:字符串,这些键(为收到的文件提供0基索引)为出错的文件。基于这个数据,本插件会自动发送缩略图和每个独立的预览文件到出错文件集。

·initialPreview数组,图像文件地址列表或者任何html标记来指出你的上传文件,如果这个属性被设置了,本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreview option setting 。举个例子:

    initialPreview: [
        '<img src='/images/desert.jpg' class='file-preview-image' alt="Desert' title="Desert'>',
        '<img src='/images/jellyfish.jpg' class='file-preview-image' alt="JellyFish' title="JellyFish'>',
    ],

initialPreviewConfig:数组,这个配置来对每个文件标记在initialPreview里面确认属性。,如果这个属性被设定了,本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreviewConfig option setting ,举个例子

    initialPreviewConfig:[
        caption:'desert.jpg',
        width:'120px',
        url:'http://localhost/avatar/delete',// server deleteaction
        key:100,
        extra: {id:100}
    },{
        caption:'jellyfish.jpg',
        width:'120px',
        url:'http://localhost/avatar/delete',// server deleteaction
        key:101,
        extra:function() {
            return {id: $('#id').val()};
        },
    }

·append:布尔值,如果你在初始化的时候已经设置了一个initialPreview ,不滚你是否向initialPreview添加这个内容。如果没有设置这个,默认值是true,如果设置成false,本插件会复写initialPreview 的内容。

举例来说,从服务器发回的数据应该像这样{error:'You have faced errors in 4 files.', errorkeys: [0, 3, 4, 5]}。提示:本插件会自动的生效并且显示ajax异常错误。

重要:你必须从你的服务器发送一个有效的的json响应,否则这个上传进度会失败,即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}

为了捕获和显示一个有效性错误,你的json恢复数据必须包含error键,而且它的值必须是html标记来显示。另外,你必须相似的为同步模式发送errorkeys来确认出错文件的键。这个可以向上面提到的一样设置。

你也可以发送额外的键或者数据在你的json回复中,你可以用filebatchuploadsuccess事件来实现进一步的功能

Comments are closed.