HTML实现⽂件上传下载功能实例解析
需求：项⽬要⽀持⼤⽂件上传功能，经过讨论，初步将⽂件上传⼤⼩控制在500M内，因此⾃⼰需要在项⽬中进⾏⽂件上传部分的调整和配置，⾃⼰将⼤⼩都以501M来进⾏限制。
第⼀步：
前端修改
由于项⽬使⽤的是BJUI前端框架，并没有使⽤框架本⾝的⽂件上传控件，⽽使⽤的基于jQuery的Uploadify⽂件上传组件，在项⽬使⽤的jslib 项⽬中到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js⽂件中，
在bjui-all.js⽂件中的全局变量定义中有以下部分代码，这就是定义的有关于上传的Uploadify控件的重要变量：
dw制作一个简单的网站//⽂件上传对象
function FileUploader(fileLoc, mgr)
{
var _this = this;
this.id = fileLoc.id;
this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null};
this.isFolder = false; //不是⽂件夹
this.app = mgr.app;
this.Manager = mgr; //上传管理器指针
this.event = mgr.event;
this.Config = mgr.Config;
this.fields = d({}, mgr.Config.Fields, fileLoc.fields);//每⼀个对象⾃带⼀个fields幅本
this.State = this.Config.state.None;
this.uid = this.fields.uid;
this.fileSvr = {
jquery下载超大文件pid: ""
, id: ""
, pidRoot: ""
, f_fdTask: false
, f_fdChild: false
, uid: 0
, nameLoc: ""
, nameSvr: ""
, pathLoc: ""
, pathSvr: ""
,
pathRel: ""
, md5: ""
, lenLoc: "0"
, sizeLoc: ""
, FilePos: "0"
, lenSvr: "0"
, perSvr: "0%"
, complete: false
, deleted: false
};//json obj，服务器⽂件信息
this.fileSvr = d(this.fileSvr, fileLoc);
/
/准备
this.Ready = function ()
{
this.("正在上传队列中等待...");
this.State = this.Config.state.Ready;
this.ui.btn.post.click(function () {
_this.ui.btn.post.hide();
_this.ui.btn.del.hide();
_this.ui.btn.cancel.hide();
_this.ui.btn.stop.show();
易语言取随机数源码if (!_this.Manager.IsPostQueueFull()) {
_this.post();
}
else {
_this.("正在上传队列中等待...");
_this.State = _this.Config.state.Ready;
$.each(_this.ui.btn, function (i, n) { n.hide(); });                _this.ui.btn.del.show();
//添加到队列
_this.Manager.AppendQueue(_this.fileSvr.id);            }
});
this.ui.btn.stop.click(function () {
_this.stop();
python基础教程零基础入门
});
this.ui.btn.del.click(function () {
_this.stop();
_ve();
});
this.ui.btn.cancel.click(function () {
_this.stop();
_ve();
//_this.PostFirst();//
});
};
this.svr_error = function ()
{
alert("服务器返回信息为空，请检查服务器配置");        this.("向服务器发送MD5信息错误");
//this.ui.("续传");
this.ui.btn.stop.hide();
this.ui.btn.cancel.show();
};
this.svr_error_same_name = function () {
this.("服务器存在同名⽂件");
this.ui.btn.stop.hide();
this.ui.btn.cancel.show();
};
this.svr_create = function (sv)
{
if (sv.value == null)
{
this.Manager.RemoveQueuePost(this.fileSvr.id);            this.svr_error(); return;
}
卡盟源码外包if (!sv.ret) {
this.Manager.RemoveQueuePost(this.fileSvr.id);            this.svr_error_same_name(); return;
}
var str = decodeURIComponent(sv.value);//
this.fileSvr = JSON.parse(str);//
//服务器已存在相同⽂件，且已上传完成
if (this.fileSvrplete)
{
this.post_complete_quick();
} //服务器⽂件没有上传完成
else
{
this.ui.process.css("width", this.fileSvr.perSvr);
this.(this.fileSvr.perSvr);
this.post_file();
}
};
this.svr_update = function () {
if (this.fileSvr.lenSvr == 0) return;
var param = { uid: this.fields["uid"], offset: this.fileSvr.lenSvr, lenSvr: this.fileSvr.lenSvr, perSvr: this.fileSvr.perSvr, id: this.id, time: new Date().getTime() };
$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //⾃定义的jsonp回调函数名称，默认为jQuery⾃动⽣成的随机函数名
, url: this.Config["UrlProcess"]
, data: param
, success: function (msg) {}
, error: function (req, txt, err) { alert("更新⽂件进度错误！" + sponseText); }
, complete: function (req, sta) { req = null; }
});
};
this.svr_remove = function ()
{
var param = { uid: this.fields["uid"], id: this.fileSvr.id, time: new Date().getTime() };
$.ajax({
type: "GET"
, dataType: 'jsonp'
,
jsonp: "callback" //⾃定义的jsonp回调函数名称，默认为jQuery⾃动⽣成的随机函数名
, url: this.Config["UrlDel"]
, data: param
, success: function (msg) { }
, error: function (req, txt, err) { alert("删除⽂件失败！" + sponseText); }
, complete: function (req, sta) { req = null; }
});
};
this.post_process = function (json)
{
荷兰vs厄瓜多尔比分预测分析最新this.fileSvr.lenSvr = json.lenSvr;//保存上传进度
this.fileSvr.perSvr = json.percent;
this.("("+json.percent+")");
this.ui.process.css("width", json.percent);
var str = json.lenPost + " " + json.speed + " " + json.time;
this.(str);
};
this.post_complete = function (json)
{
this.fileSvr.perSvr = "100%";
this.fileSvrplete = true;
$.each(this.ui.btn, function (i, n)
{
n.hide();
});
this.ui.process.css("width", "100%");
this.("(100%)");
this.("上传完成");
this.Manager.arrFilesComplete.push(this);
this.State = this.Config.state.Complete;
//从上传列表中删除
this.Manager.RemoveQueuePost(this.fileSvr.id);
//从未上传列表中删除
this.Manager.RemoveQueueWait(this.fileSvr.id);
var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };
$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //⾃定义的jsonp回调函数名称，默认为jQuery⾃动⽣成的随机函数名
, url: _this.Config["UrlComplete"]
, data: param
, success: function (msg)
{
_this.event.fileComplete(_this);//触发事件
_this.post_next();
}
, error: function (req, txt, err) { alert("⽂件-向服务器发送Complete信息错误！" + sponseText); }              , complete: function (req, sta) { req = null; }
});
};
this.post_complete_quick = function ()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。