ajaxfileupload带参数上传文件

超、凢脫俗 2022-05-10 05:16 268阅读 0赞

前几天在用ajaxfileupload上传文件时发现ajaxfileupload无法带参传递，于是我从github上找到了一个现成的可以带参传递的ajaxfileupload，并学习了ajaxfileupload怎么上传文件。

可以带参传递的ajaxfileupload的github地址：[https://github.com/carlcarl/AjaxFileUpload][https_github.com_carlcarl_AjaxFileUpload]

### Html ###

<form class="am-form tjlanmu" enctype="multipart/form-data">
        <select name="categoryName" id="categoryId" data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}">
            	<c:forEach var="c" items="${categoryList }">
                  <option value="${c.id }">${c.categoryName }</option>
              	</c:forEach>
        </select>
        <input name="photo" id="imageFile1" type="file">
        <button id="addProjectButton" type="button">提交</button>
    </form>

**form表单的enctype属性必须设置为multipart/form-data。**

**上传文件的input的id必须唯一，name属性必须有。**

## ajax ##

//添加project
    $("#addProjectButton").click(function(){
    	var project = {
    		   "category_id":$("#categoryId option:selected")[0].value
    				};
    	$.ajaxFileUpload({
    		    url:"addProject.action",//用于文件上传的服务器端请求地址
    			secureuri:false,//是否需要安全协议，一般设置为false
    			data:project,//传递的参数
    			fileElementId:"imageFile1",//文件上传域的ID
    			dataType:"JSON",//返回值类型
    			success:function(data,status){
    				//服务器成功响应处理函数
    				if(data==1){
    					alert("添加成功");
    					window.location='/vitae/projectInformation.action';
    				}else{
    					alert(data);
    					alert("添加失败");
    				}
    			 },
    			 error:function(data,status,e){
    			    //服务器响应失败处理函数
    				//e 异常信息
    				alert("error");
    			 }
    	})
    });

**ajaxfileupload的fileElementId是上传文件的input的id。**

## Controller ##

/**
    	 * 添加project
    	 * */
    	@RequestMapping("/addProject.action")
    	@ResponseBody
    	public String addProject(int category_id,@RequestParam("photo") MultipartFile uploadfile){
            String dirpath = "E:/viate/uploadImage/";//上传文件保存的地址，最好先创建好
    		Project project = new Project();
    		System.out.println(category_id);
    		project.setCategory_id(category_id);
    			//判断所上传文件是否存在
    			if(!uploadfile.isEmpty()){
    				//获取上传文件的原始名称
    				String originalFilename = uploadfile.getOriginalFilename();
    				//设置上传文件的保存地址目录
    				File filePath = new File(dirPath);
    				//如果保存文件的地址不存在，就先创建目录
    				if(!filePath.exists())filePath.mkdirs();
    				//使用UUID重新命名上传的文件名称（uuid_原始文件名称）
    				String newFilename = UUID.randomUUID()+"_"+originalFilename;
    				try {
    					//使用MultipartFile接口的方法完成文件上传到指定位置
    					uploadfile.transferTo(new File(dirPath+newFilename));
    				} catch (IllegalStateException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				} catch (IOException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    				project.setPhoto("/uploadImages/"+newFilename);
    				projectService.addProject(project);
    				return "1";
    		}
    		return "0";
    	}

** MultipartFile uploadfile就是接收上传的文件，@RequestParam("photo")的photo是上传文件input的name**

**本人用的是tomcat，要在tomcat的server.xml中的<Host></Host>之间加上图片服务器即：**

**               <Context docBase="E:/viate/uploadImage/" reloadable="true" path="/uploadImages"/>**

**其中docBase为文件保存路径，path为图片服务器访问名**

![70][]

![70 1][]

[https_github.com_carlcarl_AjaxFileUpload]: https://github.com/carlcarl/AjaxFileUpload
[70]: /images/20220510/6165d59042fe4542a061c75e39eefc7a.png
[70 1]: /images/20220510/174e87040080436e8906e6a882941c32.png