WebUploader 上传文件的两种方式（手动上传，自动上传）
2022-10-28 10:17:13 来源：admin 点击：509
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) {
});
}