-->

WEB资讯

您的当前位置:首页 > 资讯 > JS

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

2022-10-28 10:17:13  来源:admin 点击:732

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 = 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代码:


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

<div id='fileDiv'></div>

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) {

    });

}


相关文章更多 >

© 2024版权所有 水水网

电话:171780793