一个按钮上传文件操作

前台选择文件,只能通过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;
	}

</script>
</body>



参考文章 --> https://blog.csdn.net/wdehxiang/article/details/77435975

猜你喜欢

转载自blog.csdn.net/qq_42402854/article/details/81001995