Ajax Upload多文件上传插件介绍 ( github上Api ) -- AjaxUpload上传超时提示.

建议上github上去查看, 地址如下:

https://github.com/valums/ajax-upload

这次主要是用到onChange. 目的是为了在上传过程中, 如果文件过大就需要等待很久.  所以在此设置如果上传超过30秒就提示并取消上传.

    new AjaxUpload('#ImgSubmit', {
        action: url,
        onSubmit: function (file, ext) {
            //
            $('#uploadStatus').val('0');
       },
        onChange: function (file, ext) {
           if( $('#uploadStatus').val() != '1' ){
                setTimeout(function () {
                     alert("图片上传失败，建议您减小图片大小或稍后上传！");
                     return false;
                 }, 30000);
            }       
        },
        onComplete: function (file, response) {
            //
            $('#uploadStatus').val('1');
        } 
    });

这里可以简单先介绍下:

创建上载首先，您需要创建一个按钮。（可以使用任意的元素）

<div id=”upload_button”>上传</div>

接下来，您应该创建Ajax上传实例。您可以使用以下代码创建最简单的形式：

// 您必须在 DOM 准备好之后在创建它
//在jquery下使用 $(document).ready
// prototype下为document.observe(“dom:loaded”
new AjaxUpload(‘upload_button_id’, {action: ‘upload.php’});

配置Ajax上传

new AjaxUpload(‘#upload_button_id’, {
// 服务器端上传脚本
// 注意: 文件不允许上传到另外一个域上
action: ‘upload.php’,
// 文件上传的名字
name: ‘userfile’,
// 发送的附加数据
data: {example_key1 : ‘example_value’,example_key2 : ‘example_value2′},
// 筛选后提交文件
autoSubmit: true,
// 您希望从服务器返回的数据类型
// HTML (text) 和 XML 自动检测
// 当您使用JSON作为响应时很实用，在这种情况下就设置为 “json”
// 也要设置服务器端的响应类型为text/html, 否则在IE6下是不工作的
responseType: false,
// 文件选择后使用
// 当autoSubmit为disabled时很管用
// 您可以通过返回false取消上传
// @参数file为上传文件的文件名
// @参数extension为那个文件（后缀名）
onChange: function(file, extension){},
// 文件上传时调用
// 您可以通过设置返回false 取消上传
// @参数file为上传文件的文件名
// @参数extension为那个文件（后缀名）
onSubmit: function(file, extension) {},
// 当文件上传完成的时候调用
// 警告！不要使用”false”字符串作为服务器的响应
// @参数file 指上传的文件名
// @参数 response 指服务器的响应
onComplete: function(file, response) {}});

注意：不要使用数据参数附加动态数据，就像“data: (txt:textfield.value）”，因为它将在AJAX Upload实例创建的时候分配数据且以后不会改变。如果你想文本框的传递的其他数据，使用在onSubmit回调函数中的SetData方法。