上传的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() 报错就用上面那个