zoukankan      html  css  js  c++  java
  • 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;
    	}
    

      

  • 相关阅读:
    Android 设计一个可以移动的小球,当小球被拖到一个小矩形块中时退出程序
    Android canvas+paint绘制一个可以指定位置移动的小球(含触屏响应)
    Android ImageView 实现图片触屏左右、上下以及按钮切换图片
    Android Mediaplay 音乐播放器(项目中的音乐)
    第二章课后习题 Q3
    第二章课后练习 Q2、4
    第二章课后练习 Q1
    算法学习-----01背包问题
    C#设计模式--迭代器模式(学习Learning hard设计模式笔记)
    C#设计模式--命令模式(学习Learning hard C#设计模式笔记)
  • 原文地址:https://www.cnblogs.com/ckxlovejava/p/8796839.html
Copyright © 2011-2022 走看看