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

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

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

django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...
vue前端实现上传文件的两种方式
1.使用form表单的形式第一种方式就是使用FormData的方式进行上传 html代码: <el-form :model="upform" :rules="up ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
flask中使用FileField上传文件的两种方式+前端页面上传文件（flask三种上传文件方式）
文章目录上传文件方式一: 1.index.html文件: 2.主文件main.py: 上传文件方式二: 1.index2.html文件: 2.main.py文件: 上传文件方式三: 1.index3 ...
从网络上下载文件的两种方式
Delphi 编程,从网络上下载文件,我一般用 UrlDownloadToFile API函数,简单,实用. function DownloadFile(const strURL, strDownFi ...
django文件上传到服务器,django上传文件的三种方式
Django文件上传需要考虑的重要事项文件或图片一般通过表单进行.用户在前端点击文件上传,然后以POST方式将数据和文件提交到服务器.服务器在接收到POST请求后需要将其存储在服务器上的某个地方.D ...
创建和应用Java包文件的两种方式(转)
创建和应用Java包文件的两种方式(转) <Java编程艺术>章节选登.作者:高永强清华大学出版社 (即将出版) 12.1 包--package ... 12.1.1 包命名规 ...
读写ASCII文件的两种方式
读写ASCII文件的两种方式 :读取文件的路径 EXAMPLE: IDL>asciiFile=FILE_DIRNAME(ROUTINE_FILEPATH('TEST_READF')) + '\d ...
windows和虚拟机互传文件的三种方式
大家好,在平时学习工作的时候可能有这样的需求:要将windows中的文件传到虚拟机中或者将虚拟机的文件传到windows,大家都是怎么实现的呢? 今天给大家介绍下windows和虚拟机互传文件的三种方 ...

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

1 手动上传

2 自动上传

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

最新文章

热门文章