分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

前端接受文件调用后台上传文件的方法

发布时间:2023-09-06 01:27责任编辑:赖小花关键词:前端

需要用到

slice() 方法

参考

http://www.w3school.com.cn/jsref/jsref_slice_array.asp

前端HTML使用标签是

type=file的input标签,可以直接选择文件上传

JS:

 function () { ???????var file = $("#SelectImageFile")[0].files[0]; ???????var fileName = file.name; ???????var fileSplitSize = 1 * 1024 * 1024;  //文件分段大小5M ???????var size = file.size; ???????var posturl = postWebUrl;//上传文件的后台方法地址 ???????var formData = new FormData(); ???????var index1 = fileName.lastIndexOf("."); ???????var index2 = fileName.length; ???????var suffix = fileName.substring(index1, index2);//后缀名 ???????//如果需要限制后缀名,可以这么写 ???????if (suffix != ".rar" && suffix != ".zip" && suffix != ".7z") { ???????????msg("上传的影像信息必须为.rar,.zip,.7z格式"); ???????} else { ???????????formData.append("file", file.slice(start, start +fileSplitSize)); ???????????formData.append("name", fileName); ???????????$.ajax({ ???????????????url: posturl, ???????????????type: ‘POST‘, ???????????????data: formData, ?// 告诉jQuery不要去处理发送的数据 ????????????????processData: false, ?// 告诉jQuery不要去设置Content-Type请求头 ????????????????contentType: false, ???????????????beforeSend: function () { ???????????????????//console.log("正在进行,请稍候"); ???????????????}, ???????????????//分段上传,1-5上传成功后,再上传6-11,以此类推,成功后,给出提示,在成功之前,会一直显示上传进度 ???????????????success: function (data) { ???????????????????$("#process").show();//进度条显示 ???????????????????if (start + fileSplitSize >= size) { ???????????????????????$("#spnProcessShow").css("width", "100%"); ???????????????????????$("#spnProcessText").html("上传完成,已上传100%"); ???????????????????} else { ???????????????????????start += fileSplitSize; ???????????????????????Percentage = Math.round(start / size * 100); ???????????????????????$("#spnProcessShow").css("width", Percentage + "%"); ???????????????????????$("#spnProcessText").html("正在上传,已上传" + Percentage + "%"); ???????????????????} ???????????????}, ???????????????error: function (data) { ???????????????????start = 0; ???????????????????$("#process").hide();//隐藏进度条 ???????????????????$("#spnProcessShow").css("width", "0%"); ???????????????????$("#lblMsg").html("影像上传失败"); ???????????????????????????????????} ???????????}); ???????} ???} ???

前端接受文件调用后台上传文件的方法

原文地址:http://www.cnblogs.com/llcdbk/p/7903423.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved