• form enctype="multipart/form-data" ajax 文件上传


    <form method="post" enctype="multipart/form-data" id="resource"> 
    	<table border="1" width="100%" >
    		<th colspan="3">资源上传</th>
    		<tr height="28px">
    			<td width="12%" align="right">文 件 名:</td>
    			<td width="68%" >
    				<input class="zxui-textbox" style="300px" id="title"> 
    			</td>
    			<td rowspan="3">
    				<div style="height: 380px">
    					<input type="file" name="files"><br>
    				</div>
    			</td>
    		</tr>
    		<tr height="28px">
    			<td width="12%" align="right">文件类型:</td>
    			<td width="68%" >
    				<select id="cc" class="zxui-combobox" name="dept" style="200px;">   
    				    <option value="0">书籍</option>   
    				    <option value="1">音频</option>   
    				    <option value="2">视频</option>   
    				</select>  
    			</td>
    		</tr>
    		<tr height="28px">
    			<td width="12%" align="right">备 注:</td>
    			<td width="68%" >
    				<input class="zxui-textbox" style="300px" id="remark"> 
    			</td>
    		</tr>
    		<tr height="28px">
    			<td width="100%" colspan="3" align="center">
    				<a id="fileUpload" onclick="subResource()" class="zxui-linkbutton" data-options="iconCls:'downloadIcon'">上传</a>  
    			
    			</td>
    		</tr>
    	</table>
    </form>
    

      js:

    function subResource(){
    	 var remark=$('#remark').val();
    	 var title=$('#title').val();
    	 var files = $('#files').val();
    
         //调用apicontroller后台action方法,将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
         if (files != ''& remark != '' & title != '') {
        	 var formData = new FormData($("#resource")[0]);
        	 formData.append("remark",remark);
        	 formData.append("title",title);
        	 
             $.ajax({
                 url: "..../resources/upload.pt",
                 type: 'POST',
                 data: formData,
                 async: false,
                 cache: false,
                 contentType: false,
                 processData: false,
                 success: function (returnInfo) {
                	if (returnInfo==true) {
                		 $.messager.alert('提示:','上传成功!');    
                		 $('#fileUpload').linkbutton('disable');
        			} else {
        				$.messager.alert('提示:','上传失败!请重新上传!');   
        			}
                 },
                 error: function (returnInfo) {
                     //上传失败时显示上传失败信息
                     //document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
                 }
             });
    	  } else {
    		  $.messager.alert('提示:','请完善上传资源或信息!');  	
    	  }
    }
    

      后台:

    	@RequestMapping("upload")
    	@ResponseBody
    	public boolean upload(MultipartFile files,String remark,String title) throws Exception, IOException{
    		MultipartFile ufile=files;
    		String oname=ufile.getOriginalFilename();
    		String name=ufile.getName();
    		ServletContext context=this.getRequest().getSession().getServletContext();
    		String realname=context.getRealPath("/upload");
    		File nfile=new File(realname+"/"+UUID.randomUUID().toString()+oname);
    		ufile.transferTo(nfile);
    		
    		Dmp dmp =new BaseDmp();
    		String id = CodeUtil.getTimeSequence(30);
    		UserInfo user = this.getUserInfo();
    		String userid = user.getUserid();
    		String usname = user.getUsername();
    		dmp.put("id", id);
    		dmp.put("creater", usname);
    		dmp.put("createrid", userid);
    		dmp.put("address", String.valueOf(nfile));
    		dmp.put("remark", remark);
    		dmp.put("title", title);		
    		int i =reService.in_resources(dmp);
    		boolean bo = false;
    		if (i>0) {
    			bo = true;
    		}
    		return bo;
    	}
    

      

  • 相关阅读:
    插槽slot
    过渡效果
    bus案例
    WPF ImageControl描边图片
    Bitmap透明图片描边
    XmlHelper.cs
    WPF在Visual studio中打包,发布注意事项
    MOS管原理和使用
    Linux下彻底卸载mysql详解
    Mysql8.0 InnoDB Cluster高可用集群安装(非高性能)
  • 原文地址:https://www.cnblogs.com/ckxlovejava/p/8796839.html
Copyright © 2020-2023  润新知