AG广东会,山东十一选五,大发

pre name="code" class="html">!DOCTYPE html> 
head>/head> 
body> 
form id="uploadForm" action="/PicSubmit/form" method="post" enctype="multipart/form-data" onsubmit="return submit_check()" class="bootstrap-frm" >/pre>pre name="code" class="html">input id = "sid" type = "text" name="name" />/pre>pre name="code" class="html">pre name="code" class="html">input id = "fileImage" type = "file" name="filename" />/pre>pre name="code" class="html">input id = "addressid" type = "hidden" name="address" />/pre>pre name="code" class="html">input id="ajaxsub" type="button" class="button" value="上传图片" , [xhr, s, e] ); 
    } 
  } 
});/pre>p>/p> 
p>br> 
/p> 

p>/p>pre name="code" class="javascript">function fileUpload() {  
  var inputObject = $("#fileImage").get(0); 
  if(inputObject.value == "") 
  { 
    alert("清先选择需要上传的图片"); 
    return false; 
  } 
  $.ajaxFileUpload({  
    url: '/PicSubmit/pic', //服务器端请求地址  
    secureuri: false, //是否需要安全协议，一般设置为false  
    type: 'post', 
    fileElementId: 'fileImage', //文件上传域的ID  
    dataType: 'text', //返回值类型 一般设置为json  
    enctype:'multipart/form-data',//注意一定要有该参数  
    success: function (data, status) //服务器成功响应处理函数  
    {  
      data=decodeURI(data);//服务器端使用urlencode将中文字符编码，所以这里需要解码。这样做的目的是防止中文乱码 
      var address = JSON.parse(data); 
      for(var i=0;iaddress.length;i++){ 
        ajaxfile_onSuccess(address[i]); //这里的success回调函数可以自己定义，但是有一点需要注意，就是需要把服务器返回来的图片存储路径写入/pre>pre name="code" class="javascript">span style="white-space:pre">              /span>//hiden标签的value值中，方法见下面的writeHide函数 
      } 
    },  
    complete: function(xmlHttpRequest)  
    {span style="white-space:pre"> /span>//这里将html中的文件上传标签替换为新的标签，是应为我在开发过程中发现，当ajax执行一次上传操作之后，再使用file标签选择文件时，标签没有反应，/pre>pre name="code" class="javascript">span style="white-space:pre">   /span>//所以暂时使用了这种方法。 
      inputObject.replaceWith('input type="file" id="fileImage" name="fileImage" />'); 
    }, 
    error: function (data, status, e)//服务器响应失败处理函数 
    {  
      //alert("无法连接到服务器"); 
    }  
  })  
}/pre>pre name="code" class="javascript">/pre>pre name="code" class="javascript">function writeHide(data){ 
span style="white-space:pre"> /span>if($("#addressid").get(0).value == "") 
span style="white-space:pre"> /span>{ 
span style="white-space:pre">   /span>$("#addressid").get(0).value = data.newName; 
span style="white-space:pre"> /span>} 
span style="white-space:pre"> /span>else 
span style="white-space:pre"> /span>{ 
span style="white-space:pre">   /span>$("#addressid").get(0).value = $("#addressid").get(0).value+","+data.newName; 
span style="white-space:pre"> /span>} 
} 
/pre>p>/p> 
p>3 spring./p> 
p>完成上面两个部分之后，前台的主要工作基本就结束了。我后台使用了spring框架。/p> 
p>首先是springMVC的配置文件：viewspace-servlet.xml/p> 
p>/p>pre name="code" class="html">?xml version="1.0" encoding="UTF-8" ?> 
beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" 
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:mvc="http://www.springframework.org/schema/mvc" 
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
    http://www.springframework.org/schema/beans/spring-beans-3.1.xsd 
    http://www.springframework.org/schema/mvc  
    http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd 
    http://www.springframework.org/schema/context  
    http://www.springframework.org/schema/context/spring-context-3.1.xsd"> 
  !-- 静态资源 --> 
  mvc:resources mapping="/js/**" location="/js/" /> 
  mvc:resources mapping="/css/**" location="/css/" /> 
  mvc:resources mapping="/image/**" location="/image/" /> 
  !-- 扫描web包，应用Spring的注解 --> 
  context:component-scan base-package="web"/> 
  bean id="defaultAnnotationHandlerMapping" 
     class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" /> 
  bean id="annotationMethodHandlerAdapter" 
     class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" /> 
  !-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面 --> 
  bean 
      class="org.springframework.web.servlet.view.InternalResourceViewResolver" 
      p:viewClass="org.springframework.web.servlet.view.JstlView" 
      p:prefix="/WEB-INF/jsp/" 
      p:suffix=".jsp"/>  
  !-- 使springMVC支持图片上传 -->  
  bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
      !-- 最大上传尺寸1MB --> 
      property name="maxUploadSize" value="10485760"/> 
      !-- 默认编码 --> 
      property name="defaultEncoding" value="UTF-8" /> 
      !-- 上传文件的解析 --> 
      property name="resolveLazily" value="true" /> 
  /bean> 
  !-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException --> 
   !-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 --> 
   bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver" > 
     property name="exceptionMappings"> 
       props> 
         !-- 遇到MaxUploadSizeExceededException异常时,自动跳转到/WEB-INF/jsp/error_toobig.jsp页面 --> 
         prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload/prop> 
      /props> 
    /property> 
   /bean> 
/beans>/pre>其中，类“org.springframework.web.multipart.commons.CommonsMultipartResolver”的配置是必须的，否则后台无法收到前台传来的文件。p>/p> 
p>br> 
/p> 
p>为了防止文件名中的中文字符传输出现问题，在web.xml中做如下配置：/p> 
p>/p>pre name="code" class="html">?xml version="1.0" encoding="UTF-8"?> 
web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> 
 context-param> 
  param-name>contextConfigLocation/param-name> 
  param-value>classpath:applicationContext.xml/param-value> 
 /context-param> 
 listener> 
  listener-class> 
      org.springframework.web.context.ContextLoaderListener 
    /listener-class> 
 /listener> 
 servlet> 
  servlet-name>viewspace/servlet-name> 
  servlet-class> 
      org.springframework.web.servlet.DispatcherServlet 
    /servlet-class> 
 /servlet> 
 servlet-mapping> 
  servlet-name>viewspace/servlet-name> 
  url-pattern>//url-pattern> 
 /servlet-mapping> 
 !-- 支持传输中文字符 --> 
 filter>  
    filter-name>characterEncodingFilter/filter-name>  
    filter-class>org.springframework.web.filter.CharacterEncodingFilter/filter-class>  
    init-param>  
      param-name>encoding/param-name>  
      param-value>UTF-8/param-value>  
    /init-param>  
    init-param>  
      param-name>forceEncoding/param-name>  
      param-value>true/param-value>  
    /init-param>  
  /filter>  
  filter-mapping>  
    filter-name>characterEncodingFilter/filter-name>  
    url-pattern>/*/url-pattern>  
  /filter-mapping>  
/web-app>/pre>p>/p> 
p>br> 
/p> 

pre name="code" class="java"> @RequestMapping(value="/pic") 
  @ResponseBody 
  public String submitPic(@RequestParam(value = "filename",required = false) MultipartFile[] fileImage,  
      HttpServletRequest request){ 
    if(fileImage == null){ 
      return "[]"; 
    } 
    return picSaveService.savePic(fileImage); 
  }/pre>br> 

p>br> 
/p>p>文件接收完成后，就可以对文件进行存储了，方法有很多，我这里举一个例子如下：/p> 
p>/p>pre name="code" class="java">  public String savePic(MultipartFile[] fileImage){ 
    //为图片改名 
    String oldName = ""; 
    String newName = ""; 
    String extension = ""; 
    //图片按照上传时间命名 
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 
    //存储每张图片的信息 
    ListPicConfirmData> resultList = new ArrayListPicConfirmData>(); 
    //获取配置文件中图片的存储路径 
    String path = Parameters.getInstance().getDatabaseProps().getProperty("pic_save_dir"); 
    //依次将图片存储到path路径下 
    for(int i=0;ifileImage.length;i++){ 
      System.out.println(fileImage[i].getOriginalFilename()); 
      oldName = fileImage[i].getOriginalFilename();     
      extension = oldName.substring(oldName.lastIndexOf(".")); 
      newName = sdf.format(new Date())+extension; 
      File target = new File(path,newName); 
      if(!target.exists()){ 
        target.mkdirs(); 
      } 
      try { 
          fileImage[i].transferTo(target); 
        } catch (IllegalStateException e) { 
          e.printStackTrace(); 
        } catch (IOException e) { 
          e.printStackTrace(); 
        } 
      //记录图片存储信息 
      PicConfirmData pic = null; 
      try { 
        //只存名称，路径已知，从而节省数据库空间 
        //pic = new PicConfirmData(URLEncoder.encode(oldName, "utf-8"), path+newName); 
        pic = new PicConfirmData(1,URLEncoder.encode(oldName, "utf-8"), newName); 
        resultList.add(pic); 
      } catch (UnsupportedEncodingException e) { 
        e.printStackTrace(); 
      } 
    } 
    return ToolJson.getJsonFromPicConfirmData(resultList); 
  }/pre>这里将接收到的图片的原始名称以及修改后存储使用的名称返回给前台，原始名称用于在前台页面输出“存储成功”的提示信息，修改后的名称用于给hiden标签复制，hiden标签的内容会在之后随表单中其他信息一起提交到服务端，通过hiden标签，我们就可以知道与表单关联的图片被存储在什么地方。br> 
br> 
p>/p> 
p>最后，图片上传完成后还需要提交表单，这里使用SpringMVC实现一个表单接收功能。这里名为address的参数，存储的就是图片的存储路径。/p> 
p>/p>pre name="code" class="java">  @RequestMapping(value="/form") 
  public String submitForm(HttpServletRequest request){ 
    String sid = request.getParameter("name"); 
    String address = request.getParameter("address"); 
     
    if(sid != null  submiter != null  faultTime != null  message != null  address != null){ 
      if(formDataSaveService.saveForm(sid, submiter, message, address, faultTime)){ 
        return "ac"; 
      } 
    } 
    return "error"; 
  }/pre>br> 

p>br> 
/p> 
link rel="stylesheet" href="http://static.jb51.net/public/res-min/markdown_views.css?v=1.0"> 
           /pre>