Ajax配合Spring实现文件上传功能代码

由于项目需要,开发一个可以上传图片到服务器的web表单页面。

一、 需求

Web表单页面,可以通过表单上传图片以及其他文字信息。

二、 图片上传的流程

之前没有做过这类页面,通过查询资料。发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径;之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中。

三、 方法

由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传;第二种是先在前台将图片切割为较小的文件,之后使用ajax分别上传图片到服务器,服务器实现对文件的拼接。(方法二适合较大文件的上传)下面我分别对两种方法做介绍。

方法一: 直接上传

1 html页面

<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="上传图片" onclick="fileUpload()<span style="font-family: Arial, Helvetica, sans-serif;">" /> </span></pre><pre name="code" class="html"><input type="submit" class="button" value="提交表单" />
<input type="reset" class="button" value="重置表单" />
</pre></body></html><p></p>
<pre></pre>
<br>
<pre></pre>
这一部分需要注意的是,form表单的enctype属性必须设置为“multipart/form-data”,在Html5中,如果需要多张图片一起上传,可以在<input type="file"> 标签中,增加multiple属性,例如:<input type="file" id= “fileImage” multiple />。<br>
<br>
<br>
<p></p>
<p>2 js</p>
<p>(1)js使用ajax提供的ajaxfileupload.js库。这个库使用起来还是比较方便的,和普通的ajax函数使用方法几乎相同。首先,需要ajaxfileupload.js库文件。这里需要注意,我之前在网上下载了一个ajaxfileupload.js文件不能用,浪费了很长时间,我直接把js库文件粘贴到这里,方便分享。</p>
<p></p><pre name="code" class="javascript">// JavaScript Document</pre><pre name="code" class="javascript">// ajax file uplaod
jQuery.extend({
  createUploadIframe: function(id, uri)
  {
    //create frame
    var frameId = 'jUploadFrame' + id;
    if(window.ActiveXObject) {
      var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
      if(typeof uri== 'boolean'){
        io.src = 'javascript:false';
      }
      else if(typeof uri== 'string'){
        io.src = uri;
      }
    }
    else {
      var io = document.createElement('iframe');
      io.id = frameId;
      io.name = frameId;
    }
    io.style.position = 'absolute';
    io.style.top = '-1000px';
    io.style.left = '-1000px';
    document.body.appendChild(io);
    return io;
  },
  createUploadForm: function(id, fileElementId)
  {
    //create form
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
    var oldElement = jQuery('#' + fileElementId);
    var newElement = jQuery(oldElement).clone();
    jQuery(oldElement).attr('id', fileId);
    jQuery(oldElement).before(newElement);
    jQuery(oldElement).appendTo(form);
    //set attributes
    jQuery(form).css('position', 'absolute');
    jQuery(form).css('top', '-1200px');
    jQuery(form).css('left', '-1200px');
    jQuery(form).appendTo('body');
    return form;
  },
  ajaxFileUpload: function(s) {
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
    s = jQuery.extend({}, jQuery.ajaxSettings, s);
    var id = s.fileElementId;
    var form = jQuery.createUploadForm(id, s.fileElementId);
    var io = jQuery.createUploadIframe(id, s.secureuri);
    var frameId = 'jUploadFrame' + id;
    var formId = 'jUploadForm' + id;
    if( s.global && ! jQuery.active++ )
    {
      // Watch for a new set of requests
      jQuery.event.trigger( "ajaxStart" );
    }
    var requestDone = false;
    // Create the request object
    var xml = {};
    if( s.global )
    {
      jQuery.event.trigger("ajaxSend", [xml, s]);
    }
    var uploadCallback = function(isTimeout)
    {
      // Wait for a response to come back
      var io = document.getElementById(frameId);
      try
      {
        if(io.contentWindow)
        {
          xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
          xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
        }else if(io.contentDocument)
        {
          xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
          xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
        }
      }catch(e)
      {
        jQuery.handleError(s, xml, null, e);
      }
      if( xml || isTimeout == "timeout")
      {
        requestDone = true;
        var status;
        try {
          status = isTimeout != "timeout" ? "success" : "error";
          // Make sure that the request was successful or notmodified
          if( status != "error" )
          {
            // process the data (runs the xml through httpData regardless of callback)
            var data = jQuery.uploadHttpData( xml, s.dataType );
            if( s.success )
            {
              // ifa local callback was specified, fire it and pass it the data
              s.success( data, status );
            };
            if( s.global )
            {
              // Fire the global callback
              jQuery.event.trigger( "ajaxSuccess", [xml, s] );
            };
          } else
          {
            jQuery.handleError(s, xml, status);
          }
        } catch(e)
        {
          status = "error";
          jQuery.handleError(s, xml, status, e);
        };
        if( s.global )
        {
          // The request was completed
          jQuery.event.trigger( "ajaxComplete", [xml, s] );
        };
        // Handle the global AJAX counter
        if(s.global && ! --jQuery.active)
        {
          jQuery.event.trigger("ajaxStop");
        };
        if(s.complete)
        {
          s.complete(xml, status);
        } ;
        jQuery(io).unbind();
        setTimeout(function()
        { try
        {
          jQuery(io).remove();
          jQuery(form).remove();
        } catch(e)
        {
          jQuery.handleError(s, xml, null, e);
        }
        }, 100);
        xml = null;
      };
    }
    // Timeout checker
    if( s.timeout > 0 )
    {
      setTimeout(function(){
        if( !requestDone )
        {
          // Check to see ifthe request is still happening
          uploadCallback( "timeout" );
        }
      }, s.timeout);
    }
    try
    {
      var form = jQuery('#' + formId);
      jQuery(form).attr('action', s.url);
      jQuery(form).attr('method', 'POST');
      jQuery(form).attr('target', frameId);
      if(form.encoding)
      {
        form.encoding = 'multipart/form-data';
      }
      else
      {
        form.enctype = 'multipart/form-data';
      }
      jQuery(form).submit();
    } catch(e)
    {
      jQuery.handleError(s, xml, null, e);
    }
    if(window.attachEvent){
      document.getElementById(frameId).attachEvent('onload', uploadCallback);
    }
    else{
      document.getElementById(frameId).addEventListener('load', uploadCallback, false);
    }
    return {abort: function () {}};
  },
  uploadHttpData: function( r, type ) {
    var data = !type;
    data = type == "xml" || data ? r.responseXML : r.responseText;
    // ifthe type is "script", eval it in global context
    if( type == "script" )
    {
      jQuery.globalEval( data );
    }
    // Get the JavaScript object, ifJSON is used.
    if( type == "json" )
    {
      eval( "data = " + data );
    }
    // evaluate scripts within html
    if( type == "html" )
    {
      jQuery("<div>").html(data).evalScripts();
    }
    return data;
  },
  handleError: function( s, xhr, status, e )   {
    // If a local callback was specified, fire it
    if ( s.error ) {
      s.error.call( s.context || s, xhr, status, e );
    }
    // Fire the global callback
    if ( s.global ) {
      (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    }
  }
});</pre><p></p>
<p><br>
</p> 

(2)之后调用ajaxfileupload.js库,编写图片上传脚本,这里命名为ajaxfileuplaod_implement.js 

<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;i<address.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> 

接下来是重点,在Controller中,使用如下方式接受前台穿回来的文件。<br>

<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> 

其中需要注意的是,如果前端html的input标签中使用了multiple属性,则表示标签支持上传多个图片,则controller的参数列表中,文件的类型使用MultipartFile[],反之,如果没有使用multiple属性,表示上传的是一张图片,则controller使用MultipartFile类型接收。

<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");
    //存储每张图片的信息
    List<PicConfirmData> resultList = new ArrayList<PicConfirmData>();
    //获取配置文件中图片的存储路径
    String path = Parameters.getInstance().getDatabaseProps().getProperty("pic_save_dir");
    //依次将图片存储到path路径下
    for(int i=0;i<fileImage.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></p> 

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

以上所述是小编给大家介绍的Ajax配合Spring实现文件上传功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • springMVC+ajax实现文件上传且带进度条实例

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <input type="file" name="file"/></ p> <input ty

  • SpringMVC结合ajaxfileupload.js实现文件无刷新上传

    直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLoc

  • springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项

    在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件.提交表单时一直发现后台接收不到文件,后检查发现,原来是文件的id不对. 文件上传框我们定义如下: <input class="easyui-filebox" id="image" name="image" data-options="label:'产品图片:',buttonText:

  • springMVC结合AjaxForm上传文件

    最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

  • Ajax配合Spring实现文件上传功能代码

    由于项目需要,开发一个可以上传图片到服务器的web表单页面. 一. 需求 Web表单页面,可以通过表单上传图片以及其他文字信息. 二. 图片上传的流程 之前没有做过这类页面,通过查询资料.发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径:之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中. 三. 方法 由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传:第二种是先在前台将图片切割为较小的

  • Spring mvc文件上传下载代码实例

    简介 文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况下其不能处理文件上传工作.如果想使用Spring的文件上传功能,则需要在上下文中配置MultipartResolver. 前端表单要求:为了能上传文件,必须将表单的method设置为POST,并将enctype设置为multipart/form-data.只有在这样的情况下,浏览器才会把用户选择的文件以二进制数据发送给

  • Spring实现文件上传(示例代码)

    在实际开发中,经常遇到要实现文件上传到服务器端的功能.Spring可以继承commons-fileupload插件来实现文件上传的功能.分为前端JSP编写和后台Controller的编写. 前期准备工作,首先要引入commons-fileupload这个jar包,pom.xml中的配置如下: 复制代码 代码如下: <!-- 实现文件上传,spring集成了这个功能 --><dependency> <groupId>commons-fileupload</group

  • php中通过Ajax如何实现异步文件上传的代码实例

    1:取得file对象 2:读取2进制数据 3:模拟http请求,把数据发送出去(这里通常比较麻烦) 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据: 4:完美实现 遇到的问题 目前仅有 firefox 可以正确上传文件.(chrome也可以采google.gears上传) 对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因) chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用

  • Spring MVC环境中文件上传功能的实现方法详解

    前言 我们在实际开发过程中,尤其是web项目开发,文件上传和下载的需求的功能非常场景,比如说用户头像.商品图片.邮件附件等等.其实文件上传下载的本质都是通过流的形式进行读写操作,而在开发中不同的框架都会对文件上传和下载有或多或少的封装,这里就以Spring MVC环境中文件的上传为例,讲解Spirng MVC环境下的文件上传功能实现.下面话不多说了,来一起看看详细的介绍吧. 一.客户端编程 由于多数文件上传都是通过表单形式提交给后台服务器的,因此,要实现文件上传功能,就需要提供一个文件上传的表单

  • AJAX实现文件上传功能报错Current request is not a multipart request详解

    想做一个文件上传,spring boot配合Ajax来进行.却报错:Current request is not a multipart request 这是错误截图: 当时发生这种错误,我是很震惊的,我以为找了很多办法来解决. 有以下办法,当然这些并未解决我的问题,但是部分有用,就先列举出来: 1.在页面头部加入信息: <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8

  • php+ajax实现图片文件上传功能实例

    目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • Spring Boot项目中实现文件上传功能的示例

    在实际项目中,文件上传是很多项目必不可少的一个功能.那么在 Spring Boot 项目中又是如何来实现文件上传功能的呢?一般来说,上传的文件可以保存到项目根目录下的某一文件夹中,但这样做显然是不太合适的.因此我们选择将文件上传到专门的文件服务器中.很多云计算厂商都提供文件存储服务.这里我选择的是阿里云的对象存储(OSS). 一.配置OSS 1. 导入SDK 首先,你需要注册阿里云的账号并开通对象存储服务.在准备工作完成之后,需要导入 JAVA 版本的 SDK,这里使用 maven 进行导入 <

  • SpringMVC文件上传功能实例解析

    说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. 客户端编程 1.为了上传文件,必须将HTML表格的enctype属性值设为multipart/form-data,像下面这样: <form action="action" enctype="multipart/form-data" method="post"> Sel

随机推荐