前台js文件上传，后台jfinal处理，全流程

最新推荐文章于 2022-03-14 08:31:33 发布

原创最新推荐文章于 2022-03-14 08:31:33 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jfinal #js上传文件 #html5上传文件 #上传文件 #jfinal上传文件

本文介绍了一个使用Bootstrap样式和JavaScript实现的轮播图上传功能。通过模态框展示上传界面，支持常见图片格式，并利用AJAX技术实现图片的异步上传及进度显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传的model bootstrap样式

<!-- modal1-->
	<div class="modal inmodal" id="addModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog" style="width: 400px">
			<div class="modal-content animated fadeIn">
				<div class="modal-header" style="padding: 10px 8px 8px 0px">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h6 id="yhTitle" class="modal-title">添加轮播图</h6>
				</div>
				<div class="modal-body"
					style="width: 100%; padding: 5px 0px 5px 0px">
					<div class="form-group row" style="text-align: center;">
						<img id="pic" src="" class="img-rounded"  style="max-width: 335px;">
					</div>
					
					<div class="form-group " style="margin: 0 auto; width: 82%;">
						<input type="file" name="file" id="upload-file" >
						<div class="progress">
						    <div class="progress-bar" role="progressbar" aria-valuenow="60"
						         aria-valuemin="0" aria-valuemax="100" >
						    </div>
						</div>
					</div>
					
				</div>
				<div class="modal-footer" style="lenght: 10%; padding: 5px 0px 5px 0px">
					<div class="text-center">
						<button type="button" class="btn btn-primary" onclick="uploadFile();">开始上传</button>
						<button id="yhBtn" type="button" class="btn btn-primary" >保存</button>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- modal1-->

js代码

//图片上传
function uploadFile(){    
	var xhr ;  
    var fileObj = document.getElementById("upload-file").files[0]; // 获取文件对象    
    var FileController = "../banner/uploadPic"; // 接收上传文件的后台地址    
                
    if(fileObj){    
    	  var fileName=fileObj.name;  
	   	  var extStart=fileName.lastIndexOf(".");  
	   	  var ext=fileName.substring(extStart,fileName.length).toUpperCase();  
	   	  if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){  
	    	  layer.alert("图片限于png,gif,jpeg,jpg格式", {
					skin: 'layui-layer-molv' //样式类名
						,closeBtn:0
				});
	    	  return;
	   	  }  
      //  console.log(fileObj);    
         // formDateData 对象    
             var formDate = new FormData();     
             formDate.append("myFile", fileObj);// 文件对象       
             // XMLHttpRequest 对象    
             xhr = new XMLHttpRequest();        
             xhr.open("post", FileController, true);        
             xhr.onload = function () {     
                // console.log(xhr.responseText);       
                 var d = eval("(" +xhr.responseText+ ")"); //把数据转成json    
                 $("#pic").attr("src","../"+d.path);
                 //存储到进度条（data-picUrl）自定的属性里  
                 $(".progress").attr("data-url",d.path);
                 
             };     
             xhr.onerror =  function(){  
                 console.log("上传失败")  
             }; //请求失败  
             xhr.upload.onprogress = function(evt){  
                 if (evt.lengthComputable) {//  
                      var progress = Math.round(evt.loaded / evt.total * 100) + "%";  
                      $(".progress-bar").css("width",progress);  
                 }     
             };  
             xhr.upload.onloadstart = function(){//上传开始执行方法  
                 $("#fileName").text(fileObj.name);  
             };  
             xhr.send(formDate);    
    }else{    
    	layer.alert("请选择图片", {
			skin: 'layui-layer-molv' //样式类名
				,closeBtn:0
		});
    }    
}

$(".progress").attr("data-url","");//清空数据
$(".progress-bar").css("width","0%");

//清空文件 file input
var file = document.getElementById("upload-file");
// for IE, Opera, Safari, Chrome
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else { // FF(包括3.5)
file.value = "";
}

jfinal 后台

	//文件上传con
	public void uploadPic(){
		// TODO Auto-generated method stub  
		try {
			String path = "banner";
			// 获取上传的文件
			UploadFile uf = getFile("myFile", path);
			long mediaid = System.currentTimeMillis();  
	        String rename  = mediaid +"."+FileHelper.getExtName(uf.getFileName());  
	        boolean bRet  = FileHelper.renameFile(uf.getUploadPath(), uf.getFileName(),rename);  
	        String fileName = "uploads/"+path+"/"+uf.getFileName();  
	        if(bRet){  
	            fileName = "uploads/"+path+"/"+rename;  
	        }  
			//以json格式进行渲染
			this.setAttr("path", fileName);
			this.renderJson();
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
	}

注意：可能是jfinal引入的包不一样。
uf.getSaveDirectory() 报错就用下面那个

uf.getUploadPath() 报错就用上面那个