ajax文件上传带进度条

Html

Css

文件上传 带 进度条 $ajax


    
        选择上传文件
    
    


    
    
        0%

h1 {
	text-align:center;
}
form {
	width:600px;
	margin:auto;
	padding:20px 50px;
	border:1px solid #0091f2;
	border-radius:10px;
	display:block;
}
input {
	font-size:24px;
	margin:10px;
}
.clear {
	clear:both;
}
.speed_box {
	width:600px;
	height:20px;
	display:none;
	border:1px solid #0091f2;
	border-radius:10px;
	overflow:hidden;
}
#file_box {
	min-width:600px;
	min-height:300px;
	border:1px solid #0091f2;
	border-radius:10px;
	display:inline-block;
	background:#EEE;
	overflow:hidden;
	z-index:999999;
}
#speed {
	width:0;
	height:100%;
	background:#0091f2;
	color:white;
	text-align:center;
	line-height:20px;
	font-size:16px;
}
#file_size,#file_type {
	display:inline-block;
	padding:0px 16px;
	font-size:16px;
	color:#0091f2;
	font-weight:bold;
}
#file_type {
	margin-top:30px;
}
.opts_btn {
	position:relative;
	display:inline-block;
	padding:8px 16px;
	font-size:16px;
	color:white;
	text-decoration:none;
	background:#0091f2;
	border:2px solid #0091f2;
	border-radius:3px;
	cursor:pointer;
	overflow:hidden;
}
.oFile {
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	top:0px;
	left:0px;
	opacity:0;
}
.send_btn {
	display:inline-block;
	display:none;
	float:right;
	margin-top:20px;
	padding:8px 16px;
	font-size:16px;
	color:white;
	background:#0091f2;
	border:1px solid transparent;
	border-radius:2px;
	cursor:pointer;
}

var uploadUrl = 'https://xxxxxxx';
//文件选择完毕时
function FileChangeFn(event) {
    $('.opst_txt').text('重新选择文件');
    $('.send_btn').show();
    var event = event || window.event,
        dom = '',
        ofile = $("#oFile").get(0).files[0],
        otype = ofile.type || '获取失败',
        osize = ofile.size / 1054000,
        ourl = window.URL.createObjectURL(ofile); //文件临时地址
    $('#file_type').text("选择上传文件类型：" + otype);
    $('#file_size').text("选择上传文件大小，共" + osize.toFixed(2) + "MB。");

console.log("文件类型：" + otype); //文件类型
    console.log("文件大小：" + osize); //文件大小

if ('video/mp4' == otype || 'video/avi' == otype || 'video/x-msvideo' == otype) {
        dom = '<video id="video" width="100%" height="100%" controls="controls" autoplay="autoplay" src=' + ourl + '></video>';
    }
    if ('audio/mp3' == otype || 'audio/wav' == otype  || 'audio/x-m4a' == otype) {
        dom = '<audio id="audio" width="100%" height="100%" controls="controls" autoplay="autoplay" loop="loop" src=' + ourl + ' ></audio>';
    }
    if ('image/jpeg' == otype || 'image/png' == otype || 'image/gif' == otype) {
        dom = '<img id="photo" width="100%" height="100%" alt="我是image图片文件" src=' + ourl + ' title="" />';
    }
    $('#file_box').html(dom);
};

//侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
function OnProgRess(event) {
    var event = event || window.event;
    //console.log(event);  //事件对象
    console.log("已经上传：" + event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)
    //console.log(event.total);  //附件总大小(固定不变)
    var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比  
    $("#speed").html(loaded + "%").css("width", loaded + "%");
};

//开始上传文件
function UploadFileFn() {

$('.speed_box').show();
    var oFile = $("#oFile").get(0).files[0], //input file标签
        formData = new FormData(); //创建FormData对象
    xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法)
    formData.append("UploadForm[image]", oFile); //将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去

$.ajax({
        type: "POST",
        url: uploadUrl, // 后端服务器上传地址
        data: formData, // formData数据
        cache: false, // 是否缓存
        async: true, // 是否异步执行
        processData: false, // 是否处理发送的数据  (必须false才会避开jQuery对 formdata 的默认处理)
        contentType: false, // 是否设置Content-Type请求头
        xhr: function() {
            if (OnProgRess && xhr.upload) {
                xhr.upload.addEventListener("progress", OnProgRess, false);
                return xhr;
            }
        },
        success: function(returndata) {
            $("#speed").html("上传成功");
            //alert(returndata);  
        },
        error: function(returndata) {
            $("#speed").html("上传失败");
            console.log(returndata)
            alert('请正确配置后台服务！');
        }
    });
};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

ajax文件上传带进度条



代码描述：上传进度条，%百分比显示，Ajax文件上传带进度条

HTML5 file 在选择上传文件的时候，根据需要可限制指定的文件类型(默认任意类型 )。在 input type="file" 加上 accept="指定要上传的文件类型"即可
例如：
<input type="file" id="oFile" name="myFiles" accept=".doc, .docx, .xls, .txt" onchange="FileChangeFn(event)" /> accept=".doc, .docx, .xls, .txt" 只能上传word, exls, .txt文件 accept=".rar, .zip" 只能上传压缩文件 accept=".mp3" 只能上传mp3文件 accept=".mp4, .avi, .swf, .mpeg" 只能上传视频文件 accept=".jpg, .jpeg .png, .gif, .bmp" 只能上传指定的这些图片文件 accept="image/*" image表示图片，*表示所有支持的格式， video/* video表示视频，*表示所有支持的格式
注：如果不加accept属性，则上传任意类型的文件(默认)
Html5 file 在选择上传文件的时候，根据需要可限制选择 1个或多个文件。在 input type="file" 加上 multiple 属性即可
例如：
<input type="file" id="oFile" name="myFiles" multiple onchange="FileChangeFn(event)" />
加上 multiple 属性就可以多选啦：可按住鼠标左键拖动进行多选，或按下键盘上的Ctrl键，或 Shitf键再鼠标左键点选，或 Ctrl + A 全选
注：默认情况下一般都没加multiple 属性，所以只能选择1件文件
最后：如果以上两种情况都要用到时，就同时加上 multiple属性和 accept="指定要上传的文件类型"属性即可！
例如：
<input type="file" id="oFile" name="myFiles" multiple accept=".jpg, .jpeg .png, .gif, .bmp" onchange="FileChangeFn(event)" />
使用说明：
1、默认情况下：上传按扭，上传进度条，文件大小，文件类型，都是被隐藏的，要先选择文件后才能显示出来。
2、在中间的大灰色框中，可根据所选择的上传类型，显示出来，类型为：音频，视频，图片。
3、代码中的后端上传地址，只支持图片类型，其他类型的文件不能上传（根自己需求，正确配置后端上传地址）。
4、上传时如果文件太小，上传进度条可能一闪而过，（可将浏览器网络模拟成3G网等，或选择稍大点的文件）。
5、点击[选择上传文件]按扭时，弹出浏览框有点慢，这是因为input file类型标签中没有指定 accept="*"文件类型，所以它会检索全部类型，从而导致弹出时慢。

6

最新

发表评论全部评论

暂时没有评论！

菠萝粥0

2017/11/20 17:31:36

好厉害，学习中回复

空城0

2017/10/13 15:22:24

你好。我使用后显示，请正确配置后台服务。我已经设置好目录了呀，这如何处理？

沐枫自然1

2017/11/10 21:07:21

你好，请测试一下你所设置好的目录（后端接收地址）能不能访问得到（点击上传时，打开浏览器调试工具[F12]，―> 选择 Network项，―>Headers项下面的 Status Code: [值是多少？，如 200 ok，表示能访问得到]），还有就是有没有权限、跨域、后端上传配置等问题！

回复

讯迅0

2017/5/12 14:17:31

感觉很棒
回复

прощание0

2017/5/12 9:29:40

学习了！！对我太有帮助了，写的很详细，谢谢！

沐枫自然0

2017/8/22 20:36:21

相互学习！

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

沐枫自然

相关代码

文件上传带进度条 $ajax