bootstrap 文件上传框架的应用实例1 javascript
界面效果
图一 图二
本实例 隐藏了 预览界面 图一 初始化界面； 图二 选择图片后的效果， 点击 上传 则此张图片会被后台同步处理上传到服务器。
测试显示 此JS（bootstrap3 + fileup ）框架 很稳定 ，框架资源下载 
bootstrap-3.3.7-dist.zip
<script
src="<%=basePath%>/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<!--引入bootstrap -->
<script src="<%=basePath%>/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath%>/bootstrap-3.3.7-dist/js/fileinput.min.js"
type="text/javascript"></script>
<script src="<%=basePath%>/bootstrap-3.3.7-dist/js/zh.js"
type="text/javascript"></script>
<script src="<%=basePath%>/bootstrap-3.3.7-dist/js/piexif.min.js"
type="text/javascript"></script>
<script src="<%=basePath%>/bootstrap-3.3.7-dist/js/purify.min.js"
type="text/javascript"></script>
<script src="<%=basePath%>/bootstrap-3.3.7-dist/js/sortable.min.js"
type="text/javascript"></script>
<link href="<%=basePath%>/bootstrap-3.3.7-dist/css/fileinput.min.css"
rel="stylesheet">
<!--引入bootstrap -->
<link href="<%=basePath%>/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet">
<link
href="<%=basePath%>/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
rel="stylesheet">
界面脚本及dom对象设置
<script type="text/javascript">
// $(document).ready(function () {
/**
$("#myFile").fileinput({
language : 'zh',
uploadUrl : "<%=basePath%>/servlet/Bupfile",
autoReplace : false,
maxFileCount : 4,
allowedFileExtensions : [ "jpg", "png", "gif","jpeg" ],
browseClass : "btn btn-primary", //按钮样式
previewFileIcon : "",
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
showPreview:false, //不显示预览
showRemove:true,
maxFileSize: 9000,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
},
uploadExtraData: function(previewId, index) { //额外参数的关键点
var obj = {};
obj.fodder = "777="+index +" --" + previewId;
console.log(obj);
return obj;
}
});
*/
//.on("fileuploaded", function(e, data) {
// var res = data.response;
// alert(res.success);
//})
// });
function fileChange(obj,k){
$(obj).fileinput({
language : 'zh',
uploadUrl : "<%=basePath%>/servlet/Bupfile",
autoReplace : false,
maxFileCount : 4,
allowedFileExtensions : [ "jpg", "png", "gif","jpeg" ],
browseClass : "btn btn-primary", //按钮样式
previewFileIcon : "",
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
showPreview:false,
showRemove:true,
maxFileSize: 9000,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
},
uploadExtraData: function() { //额外参数的关键点
var data = {
'name':k,
'userid':'33'
};
return data;
}
});
}
</script>
</head>
<body>
<table border="1px;">
<tr>
<td>
证件图片
</td>
<td>
<input id="myFile" type="file" name="myFile" class="fileloading"
onclick="fileChange(this,'myfile');">
</td>
</tr>
<tr>
<td>
头像图片
</td>
<td>
<input id="myFile2" type="file" name="myFile2" class="fileloading"
onclick="fileChange(this,'myfile2');">
</td>
</tr>
<tr>
<td>
房产证图片
</td>
<td>
<input id="myFile3" type="file" name="myFile3" class="fileloading"
onclick="fileChange(this,'myfile3');">
</td>
</tr>
</table>
</body>
后台处理代码 java （本实例采用servlet为服务端）
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("post");
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
DiskFileItemFactory dfif = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(dfif);
try {
List<FileItem> items = sfu.parseRequest(request);
for (int i = 0; i < items.size(); i++) {
FileItem item = items.get(i);
// 要判断是一个普通的表单域还是上传文件域
if (item.isFormField()) {
// 是一个普通的表单域
String name = item.getFieldName();
String value = item.getString();
System.out.println(name + ":" + value);
} else {
// 上传文件域,要将文件保存在服务器端
ServletContext sc = this.getServletContext();
// 获得实际部署时物理路径
String path = sc.getRealPath("upload");
System.out.println(path);
// 获得上传文件的名称
String fileName = item.getName();
System.out.println(fileName);
File temp = new File(path);
if(!temp.exists()){
temp.mkdir();
}
File file = new File(path + "//" + fileName);
System.out.println(file);
item.write(file);
if(file.length()/1024 > 100) { //kb
//压缩图片
System.out.println("yasuo");
ImagePress.pressImg(file.getAbsolutePath());
//压缩图片
}
}
}
} catch (Exception e) {
e.printStackTrace();
response.getWriter().write("添加失败");
}
JSONObject json = new JSONObject();
json.put("success", "添加成功");
response.getWriter().write(json.toString());
}
如有疑问 请留言 欢迎提供建议
评论已有 0 条