上传的 model bootstrap 样式
js 代码
<!-- 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-->
jfinal 后台
//图片上传
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();
}
}
uf.getSaveDirectory() 报错就用下面那个
uf.getUploadPath() 报错就用上面那个
来源: http://blog.csdn.net/qq_36073929/article/details/78980923