使用jquery.form.js实现文件上传及进度条前端代码

JavaScript021

使用jquery.form.js实现文件上传及进度条前端代码,第1张

ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。

去掉hidden的class，看到的效果是这样的

[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在file的input里面，绑定方式就随意了。

var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'//上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden")progress.width(percentVal)status.html(percentVal)}, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'progress.width(percentVal)status.html(percentVal)console.log(percentVal, position, total)}, success: function (result) { percentVal = '100%'progress.width(percentVal)status.html(percentVal)//获取上传文件信息 uploadFileResult.push(result)// console.log(uploadFileResult)$(".upload-file-result").html(result.name)$("#upload-input-file").val('')}, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown)$(".upload-file-result").empty()} })

[图片上传失败...(image-3d6ae0-1548557865446)]

[图片上传失败...(image-9f0adf-1548557865446)]

更多用法可以 参考官网

我想到三种实现方法：

1、CSS字体支持反色效果。你可以用css实现。

2、CSS得遮罩效果，做两层把下面遮住，一点点露出来。

3、用canvas绘图。

var jsload = {

img: [ 'about.png', 'applyBtn.png', 'background2.png', 'bgImg.png', 'bird.cman.png', 'borad2.png',

'choujiang.png','entry.png','f_0.png','f_1.png','f_2.png','f_3.png',

'f_4.png','f_5.png','f_6.png','f_7.png','f_8.png','f_9.png',

'fxFBfont.png','ground.2.png','logo.png','pgBar.png','pgBg.png','pipe2.png',

'raffle.png','rank.png','rankBtn.png','ruleBtn.png','shareButton.png',

'shareImg.png','sureBtn.png','tap.png','titleImg.png','trymore.png'

],

count: 1,

go: 1,

init: function () {

var _this = this

$.get('dom.txt', function (response) {

$('#gameDiv').append(response)

_this.move()

})

this.count += this.img.length

this.go = this.count

this.loadImg()

},

loadImg: function () {

for (var i = 0i <this.img.lengthi++) {

var img = new Image()

var _this = this

img.onload = function () {

_this.move()

}

img.src = 'resource/assets/' + this.img[i]

}

return this

},

move: function () {

--this.go

var press = Math.round((this.count - this.go) / this.count * 100)

console.log('游戏加载进度', press)

// if(press === 100){

// start.init()

// }

}

}

jsload.init()

图片 和txt加载 可以参考下