form 文件上传

通过form属性enctype="multipart/form-data"上传

html:

<form action="" class="" enctype="multipart/form-data" id="peo-new-form">
　　<div class="flex flex-pack-center">
　　　　<div class="fullPath peo-edit-fullPath ellips" id="peo-edit-fullPath"></div>
　　　　<a href="javascript:;" class="file peo-edit-file peoForm" id="peo-edit-file">选择文件
　　　　　　<input type="file" name="" id="editForm">
　　　　</a>
　　</div>
</form>

 

css:

对原有的文件上传进行美化

.file {

　　 position: relative; 

　　width: 160px;

　　 height: 56px;

　　 line-height: 40px;

　　 padding: 7px 10px; 

　　text-align: center;

　　 border-radius: 13px;

　　 overflow: hidden;

　　 text-indent: 0;

　　color: #54546C;

　　font-size: 30px;

　　background: #fff;

}

.file input {

　　  position: absolute;

　　 font-size: 100px;

　　 right: 0;

　　 top: 0;

　　 opacity: 0;

　　 cursor: pointer;

}

.fullPath {

　　 width: 398px;

　　 height: 56px;

　　  line-height: 56px;

 　　margin-right: 5px;

　　 padding: 0 10px;

　　 background: #FFFFFF;

　　  border-radius: 13px;

 　　color: #54546C;

　　 font-size: 30px;

}

js:

前后端联调的时候是后端做的相关判断；现在增加前端判断功能

$(".peoForm").on("change","input[type='file']",function(target){//公告 文件上传
　　var filePath=$(this).val();
　　$(".fullPath").html("");
　　$(".fullPath").html(filePath.replace(/\\/g,'/'));
　　var size=$(this)[0].files[0].size;//字节1KB=1024B 1MB=1024KB
　　var sizeM=size/1024/1024;//mb
　　var sizeK=size/1024;//kb
　　if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1 || filePath.indexOf("jpeg")!=-1 && sizeM<5){//类型 大小
　　　　var _URL = window.URL || window.webkitURL;
　　　　var file=$(this)[0].files[0];
　　　　var img = new Image();
　　　　img.onload = function () {
　　　　　　if(this.width<183&&this.height<244){//尺寸 图片
　　　　　　　　console.log('width:'+this.width,'height:'+this.height);
　　　　　　}else{
　　　　　　　　alert('成功');
　　　　　　}
　　　　};
　　　　img.src = _URL.createObjectURL(file);
　　}else{
　　　　alert('内容有误');
　　　　return false
　　}
});

请求后台：

var form = new FormData(document.getElementById("peo-new-form"));
$.ajax({
　　url:'police_addPolice.action',
　　type:'POST',
　　data:form,
　　processData: false,
　　contentType: false,

　　xhr: function() {//进度条

　　　　var xhr = new XMLHttpRequest();
　　　　//使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
　　　　xhr.upload.addEventListener('progress', function (e) {
　　　　　　console.log(e);
　　　　　　//loaded代表上传了多少
　　　　　　//total代表总数为多少
　　　　　　var progressRate = (e.loaded / e.total) * 100 + '%';

　　　　　　//通过设置进度条的宽度达到效果
　　　　　　$('.progress > div').css('width', progressRate);
　　　　})

　　　　return xhr;
　　},

　　success:function(data){
　　　　//console.log(data);
　　　　var data=JSON.parse(data.replace(/\\/g,'/'));
　　　　var fileName=data.data.tagCode;
　　　　codeMsgFun(fileName);
　　},
　　error:function(){console.log('err');}
});

//四个判断 状态值
function codeMsgFun(fileName){
　　var noticePop=$(".notice-alert-pop");
　　var title=noticePop.find('.peo-checked-title');
　　noticePop.show();//指的是弹窗的显示 一级修改标题的内容
　　if(fileName==1){
　　　　title.html('文件类型有误');
　　}else if(fileName==2){
　　　　title.html('文件大小有误');
　　}else if(fileName==3){
　　　　title.html('上传成功');
　　}else if(fileName==4){
　　　　title.html('文件不能为空');
　　}else{
　　　　title.html('上传发生异常');
　　}
//上传
　　$(".notice-alert-pop").on("click",'.notice-checked-ok',function(){
　　　　if(title.html()=='上传成功'){
　　　　　　window.location.reload();
　　　　}else{
　　　　　　noticePop.hide();
　　　　}
　　});
};

转载于:https://www.cnblogs.com/lyt598/p/11158053.html