WebUploader 上传文件的两种方式(手动上传,自动上传)

时间:2025-04-27 14:08:58

1 手动上传

上传文件分为两步,第一步选择文件,第二步上传文件。

HTML代码:

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>
<input type='button' id='uploadFile' onclick='uploadFile()' value='上传文件'>

JS代码: 

$(function(){
    initUploader();
})
var uplaoder="";
//初始化WebUploader组件
function initUploader(){
    uploader = ({
        swf: '',
        // 文件接收服务端。
        server: '',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: {
            id: '#selectFile',
            multiple: false,
        },
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize: false,
        fileNumLimit: 1,
        fileSingleSizeLimit: 10 * 1024 * 1024,// 限制在20M
    });
    // 当有文件被添加进队列的时候
    ('fileQueued', function (file) {
        $("#fileDiv").html();
    });
    // 文件上传过程中创建进度条实时显示。
    ('uploadProgress', function (file, percentage) {
    });

    ('uploadSuccess', function (file, response) {
        if (response._raw.length > 0) {
            alert('上传成功');
        } else {
            alert("上传失败");
        }
    });

    ('uploadError', function (file, response) {
        alert('上传出错');
    });

    ('uploadComplete', function (file, response) {
    });
}
//上传文件
function uploadFile(){
    var dd = ().length;
    var formData = {};
    if (dd > 0) {
         = formData;
        ();
    } else {
        alert("请选择文件!");
    }
}

2 自动上传

选择文件时自动上传文件。

HTML代码:

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>

JS代码:

$(function(){
    initUploader();
})
var uplaoder="";
//初始化WebUploader组件
function initUploader(){
    uploader = ({
        auto: true,//是否自动上传,true为自动上传
        method: 'post',
        server: "",
        pick: {
            id: $("#selectFile"),
            multiple: false
        },
        swf: '',
        formData: {
        }, 
        resize: false
    });
     = function (file) {
    };

    ('uploadSuccess', function (file, response) {
        if (response._raw == "1") {
            $("#fileDiv").html();
        }
    });

    ('uploadError', function (file, response) {
        alert("系统错误!");
    });

    ('uploadComplete', function (file, response) {
    });

    ('uploadBeforeSend', function (obj, data, headers) {
    });
}