WebUploader 上传文件的两种方式（手动上传，自动上传）

喜欢ヅ旅行 2023-10-05 15:14 22阅读 0赞

#### 1 手动上传 ####

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

HTML代码：

JS代码：

$(function(){
        initUploader();
    })
    var uplaoder="";
    //初始化WebUploader组件
    function initUploader(){
        uploader = WebUploader.create({
            swf: 'Uploader.swf',
            // 文件接收服务端。
            server: 'Upload.aspx',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#selectFile',
                multiple: false,
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            fileNumLimit: 1,
            fileSingleSizeLimit: 10 * 1024 * 1024,// 限制在20M
        });
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $("#fileDiv").html(file.name);
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
        });
    
        uploader.on('uploadSuccess', function (file, response) {
            if (response._raw.length > 0) {
                alert('上传成功');
            } else {
                alert("上传失败");
            }
        });
    
        uploader.on('uploadError', function (file, response) {
            alert('上传出错');
        });
    
        uploader.on('uploadComplete', function (file, response) {
        });
    }
    //上传文件
    function uploadFile(){
        var dd = uploader.getFiles().length;
        var formData = {};
        if (dd > 0) {
            uploader.options.formData = formData;
            uploader.upload();
        } else {
            alert("请选择文件！");
        }
    }

#### 2 自动上传 ####

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

HTML代码：

JS代码：

$(function(){
        initUploader();
    })
    var uplaoder="";
    //初始化WebUploader组件
    function initUploader(){
        uploader = WebUploader.create({
            auto: true,//是否自动上传，true为自动上传
            method: 'post',
            server: "Upload.aspx",
            pick: {
                id: $("#selectFile"),
                multiple: false
            },
            swf: 'Uploader.swf',
            formData: {
            }, 
            resize: false
        });
        uploader.onFileQueued = function (file) {
        };
    
        uploader.on('uploadSuccess', function (file, response) {
            if (response._raw == "1") {
                $("#fileDiv").html(file.name);
            }
        });
    
        uploader.on('uploadError', function (file, response) {
            alert("系统错误！");
        });
    
        uploader.on('uploadComplete', function (file, response) {
        });
    
        uploader.on('uploadBeforeSend', function (obj, data, headers) {
        });
    }