• FormData对象实现文件Ajax上传


    后台:

    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    /**
     * 
     * @Description :文件上传
     * @version : 1.0
     * @Date : 2016年4月28日 下午1:17:53
     */
    @Controller
    @RequestMapping("/upload")
    public class UploadController extends BaseController {
        private static final Logger log = LoggerFactory.getLogger(UploadController.class);
        @RequestMapping("/index")
        public String index() {
            return "upload/upload";
        }
    
        /**
         * 上传
         * 
         * @param files
         * @param request
         * @param response
         * @return
         */
        @RequestMapping("/files")
        public @ResponseBody String file(@RequestParam MultipartFile[] files, HttpServletRequest request,
                HttpServletResponse response, String path) {
            String url = "";
            try {
                // 
                for (MultipartFile file : files) {
                    // 此处编写业务代码处理,组合url
                    
    
                }
                System.out.println("上传文件路径:" + url);
                return url.substring(0, url.length() - 1);
            } catch (Exception e) {
                e.printStackTrace();
                log.error(e.getMessage(), e);
            }
            return url;
        }
    }

    页面:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">
    
    <title>上传文件</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
    <script type="text/javascript"
        src="<%=path%>/resources/js/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function(){
            $("#upload").click(function() {
                //FormData支持文件ajax上传
                //使用 jQuery 来发送 FormData,但必须要正确的设置相关选项:
                //processData: false,  // 告诉jQuery不要去处理发送的数据
                //contentType: false   // 告诉jQuery不要去设置Content-Type请求头
                //支持浏览器:Chrome 7+, Firefox(2.0) 4.0, Internet Explorer 10+, Opera 12+,Safari 5+
                var formData = new FormData($("#uploadForm")[0]);
                $.ajax({
                    url : "<%=path%>/upload/files.html",
                    data : formData,
                    type : "post",
                    dataType : "text",
                    timeout : 3600000,
                    async : true,
                    cache : false,
                    contentType : false,
                    processData : false,
                    success : function(data) {
                        if (data == "") {
                            alert("上传文件失败!");
                        } else {
                            $("#url").text(data);
                        }
                    },
                    error : function(data) {
                        alert(data);
                    }
                });
            });
    
        });
    </script>
    
    </head>
    
    <body>
        <center>
            <form id="uploadForm" enctype="multipart/form-data" method="post">
                选择文件:<input type="file" name="files" multiple="multiple"><br />
                <br /> <input type="button" value="上传" id="upload">
            </form>
            上传成功文件路径:<label id="url" />
        </center>
    </body>
    </html>
  • 相关阅读:
    python 网络客户端编程端口,模块
    Python反转
    ASP.NET的路由系统
    yield 关键字
    C# Lock关键字
    C#中as和is关键字
    13.4 上下文对象
    请求生命周期
    ASP.NET常用的指令
    ASP.NET Page 指令
  • 原文地址:https://www.cnblogs.com/lyxy/p/5501904.html
Copyright © 2020-2023  润新知