一、一个按钮上传文件操作
前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。
第一步、隐藏文件选择框
第二步、设置按钮事件onclick，触发文件选择框事件
第三步、选择文件后自动上传，触发文件选择时事件onchange
第四步，使用插件上传，插件有很多，大家可以网上找，我这边用的是jquery.form.js插件（http://plugins.jquery.com/form/）
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script><body>
<form id="upLoadForm" enctype="multipart/form-data">
<input type="file" name="file" id="file" style="display:none" multiple="multiple" onchange="fileUpload()">
<span id="upLoad" onclick="selectFile()">上传文件</span>
</form>
<script type="text/javascript">
//打开文件选择框
function selectFile(){
$("#file").trigger("click");
}
function fileUpload(){
var option = {
url : "http://127.0.0.1:8080/struts2/user/UserAction_add", //自己的url
type : 'POST',
datatype:'json',
clearForm: true,//提交后是否清空
success : function(map) {
alert("上传成功!");
} ,
error:function(data){
alert("页面请求失败！");
}
};
$("#upLoadForm").ajaxSubmit(option);
return false;
//或者ajax等
}
</script>
二、一个图片上传预览
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ssm</title>
<script type="text/javascript" src="./static/js/jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<h4>文件上传</h4>
<form name="form0" id="form0">
<img src="" id="img0" style="width: 130px;height: 135px;" onclick="selectFile()" required="required"><br>
<input type="file" name="file" id="file0" style="display:none" multiple="multiple" />
<span style="color: red;">点击图片上传</span>
</form>
<script>
//打开文件选择框
function selectFile(){
$("#file0").trigger("click");
}
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
//console.log("objUrl = "+objUrl + "==== "+this);
checkFile(this)
if (objUrl) {
$("#img0").attr("src", objUrl);
}
}) ;
function getObjectURL(file) {
var url = null;
if (window.createObjectURL!=undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//检查是否是图片
function checkFile(file) {
var filehz = getFileHz(file.value);
//console.log(filehz);
if(filehz == "" || filehz == null){
toastr.error("请重新选择！");
return false;
}
if ("png" != filehz && "jpg" != filehz && "jpeg" != filehz) {
toastr.error("上传的文件类型不符合要求！");
return false;
}
}
function getFileHz(filename) {
var arr = new Array();
arr = filename.split(".");
return arr[arr.length - 1];
}
</script>
</html> 
选择图片之后 
参考文章