Ajax上传

100门课程在线学, 成为月入5万架构师

你需要设置服务器方法通过AJAX来解析并返回正确的响应。你可以按异步或同步模式设置上传,如下所述。

  • 异步上传
  • 同步上传

    异步上传

    这是默认模式,也就是说uploadAsync属性设置为true。当上传多个文件时,异步模式允许触发并行调用服务器方法接受每个上传文件。您可以通过设置maxFileCount属性来控制一次允许上传的最大文件数。在异步模式下,预览中每个缩略图的进度被验证和更新。

接收数据(在服务器上)

你设置的服务器方法(uploadUrl)从插件接收以下数据:

文件数据:以与form文件输入非常相似的格式将这些数据发送到服务器。例如,在PHP中,你可以使用代码$_FILES['input-name']读取文件数据,input-name是你的input标签的name属性。如果你没有为input标签设置name属性,则它的名称默认为file_data。请注意,多个文件上传需要你为input标签设置multiple属性为true。这样在PHP中你会收到文件数据$_FILES['file_data']。(servlet中使用request.getParts()获取多个文件数据,使用request.getParts("input-name")获取单个文件)

额外的数据:该插件可以向你的服务器方法发送附加数据。这可以通过将uploadExtraData设置为键值对关联数组对象来完成。所以如果你设置uploadExtraData={id:'kv-1'},在PHP中你可以以$_POST['id']的方式读取这些数据。

注意

在异步模式下,你会经常在处理ajax上传的服务端接收到单个的文件数据。基本上,这个插件对每个上传的文件都会触发并行的ajax调用方法。你需要相应地编写服务器上传逻辑,以便您始终读取和上传单个文件。同样,在下面的发送数据部分中,你必须返回一个initialPreview,它反映收到的单个文件的数据。

发送数据(从服务器)

你的服务器方法(uploadUrl)必须返回一个json编码对象数据。在这种情况下,您可以发送这4个信息。请注意,在异步模式下,您会始终从服务器收到一个文件的记录 - 因此你也要相应地调整前端JS代码。

error:string类型,它是整个批量上传的错误消息,并将帮助插件识别文件上传中的错误。例如,来自服务器的响应像{error: 'You are not allowed to upload such a file.'}这样。注意:插件将自动验证并显示ajax异常错误。

initialPreview:数组,图像文件列表或任何指向你上传文件的HTML标记。你会经常发送此队列中的一行,因为你在异步方式会一直收到上传的单个文件。如果设置了此属性,插件会在每个文件上传成功后动态地在预览内容中替换文件。这个配置类似于initialPreview选项设置。例如:

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

initialPreviewConfig:数组,用于标识initialPreview条目(即initialPreview的一部分)中每个文件标记的属性的配置。你会始终发送这个队列中一行,因为你始终以异步方式收到上传的一个文件。如果设置了此属性,插件会在每个文件上传成功后自动在预览内容中替换文件。这个配置类似于initialPreviewConfig选项设置。例如:

initialPreviewConfig :[ 
    {
        标题:'desert.jpg' ,  
        width:'120px' ,  
        url:'http://localhost/avatar/delete'//服务器删除操作  
        关键:100 ,  
        extra:{id:100}  
    }
]

initialPreviewThumbTags:数组,每个初始预览缩略图相对应的替换标签对象数组。通过initialPreview设置的初始预览缩略图会读取此配置为替换标签。

//更改缩略图页脚模板
//设置初始预览模板标签
initialPreviewThumbTags :[
    {
        '{CUSTOM_TAG_NEW}':'', 
        '{CUSTOM_TAG_INIT}':'<span class = \'custom-css\'>CUSTOM MARKUP</span> '
    }
];

append:boolean类型,如果你已经在INIT中设置了initialPreview是否将内容插入initialPreview。如果未设置,则默认为true。如果设置false,插件将覆盖initialPreview内容。

重要

  • 你必须从服务器发送有效的JSON响应,否则上传过程将失败。即使您没有遇到任何错误,您至少必须从服务器发送一个空的JSON对象{}。

  • 要捕获并显示验证错误,你的JSON响应数据必须包含该error键,其值将是要显示的错误HTML标记。如上所述那样设置。

  • 你还可以使用JSON响应发送附加的密钥或数据,以便使用诸如fileuploaded此类的事件对高级案例进行处理

同步上传

在此模式下,uploadAsync属性设置为false。它只会触发一次批量上传到服务器的方法,并将文件以对象数组的方式从客户端发送到服务器。尽管在此模式下,你可以通过设置maxFileCount属性来控制一次允许上传的最大文件数。然而,在同步模式下,进度只会是对于整体水平的一个标量。预览中每个缩略图的进度未被精确计算和更新。但是,该插件为你提供了识别每个文件上传错误的方法。

接收数据

你设置的uploadUrl服务器方法从插件接收以下数据:

文件数据:以与表单输入格式非常相似的格式将该数据发送到服务器。例如,在PHP中,您可以将该数据读取为$_FILES['input-name']input-name是你的输入标签的name属性。和之前的异步模式相同,如果你没有为输入标签设置名称属性,则该名称将默认为file_data。除了将multiple属性设置为true之外,你必须将输入标签的name属性设置为网页提示中提到的数组格式。如果你不将输入名称设置为数组格式,那么你只能在服务器上收到第一个文件。在PHP中,你将收到文件数据$_FILES['input-name'],它将是一组文件对象。

额外的数据:该插件可以向你的服务器方法发送附加数据。这可以通过设置uploadExtraData为键值对关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'},在PHP中你可以像$_POST['id']这样读取这些数据。

发送数据

在同步模式下,uploadUrl必须发送json编码对象数据作为响应。在这种情况下,你需要发送这5条信息。

error:字符串类型,它是整个批量上传的错误消息,并将帮助插件识别文件上传中的错误。

errorkeys:数组类型,已经出错的文件的键值(接收的文件数据的基于零的索引)。根据这些数据,插件会自动设置缩略图和每个预览文件的错误。

initialPreview:数组类型,图像文件列表或任何指向你上传文件的HTML标记。如果设置了此属性,插件会在上传成功后自动在预览内容中替换文件。这个配置类似于initialPreview选项设置。例如:

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

initialPreviewConfig:数组类型,用于标识initialPreview条目中每个文件标记(即作为initialPreview的一部分进行设置)的属性的配置。如果设置了此属性,插件会在上传成功后自动在预览内容中替换文件。这个配置类似于initialPreviewConfig选项设置。例如:

initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // 服务器删除行为
        key: 100, 
        extra: {id: 100}
    },
    {
        caption: 'jellyfish.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // 服务器删除行为
        key: 101, 
        extra: function() { 
            return {id: $('#id').val()};
        },
    }
]

initialPreviewThumbTags:数组类型,对应于每个初始预览缩略图中替换标签的对象数组。通过设置initialPreview的初始预览缩略图将读取此配置以替换标签。

//更改缩略图页脚模板
//设置初始预览模板标签
initialPreviewThumbTags:[
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP 1</span>'
    },
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP 2</span>'
    }
];

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事件对高级案例进行处理

results matching ""

    No results matching ""