spring mvc框架+ ajax实现文件上传

1.前端页面，通过form表单提交，必须设置

enctype="multipart/form-data"  代表form表单在发送到服务器时候编码方式是二进制类型，一般用于图片、mp3、文件

<form method="get" action="" class="form-horizontal" role="form" id="form_data" onsubmit="return check_form()" style="margin: 20px;" enctype="multipart/form-data">
                    <div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"  aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">配置信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="projectid" class="col-sm-3 control-label">项目名称</label>
                                            <div class="col-sm-9">
                                                <select class="form-control" name="projectid" id="projectid">
                                                    <c:forEach var="p" items="${projects }">
                                                        <option value="${p.projectid}">${p.projectname}</option>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="apppackage" class="col-sm-3 control-label">app包名</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" name="apppackage" id="apppackage" placeholder="app包名">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <%--@declare id="files"--%>
                                                <label for="files" class="col-sm-3 control-label">上传apk</label>
                                            <div class="col-sm-9">
                                                <input type="file" class="form-control" id="apkupload" name="files">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="remark" class="col-sm-3 control-label">备注</label>
                                            <div class="col-sm-9">
                                                <textarea class="form-control" name="remark" id="remark"  placeholder="备注"></textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"   data-dismiss="modal" id="close">关闭</button>
                                    <button type="submit" class="btn btn-primary" disabled="disabled">提交</button>
                                    &nbsp;&nbsp;&nbsp;&nbsp;<span id="tip"> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

2. ajax请求

注意：contentType要设置为false，
当在form 标签中设置了enctype = “multipart/form-data”后,请求中的 contentType 会默认为 multipart/form-data 。
而ajax中contentType设置为false是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件（文件是需要分隔符的，比如文件内容和文本内容之间就是用分割符分割）
补充：
async 默认是true，即为异步方式，$.Ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.Ajax里的success方法，这时候执行的是两个线程。

      若为false，则所有的请求均为同步请求，用户必须等待请求完成才能执行其他操作。

// 提交表单
    function check_form(){
        // var form_data = $('#form_data').serialize();
        var formData = new FormData($( "#form_data" )[0]);
        // 异步提交数据到action页面
        $.ajax({
                url: "configadd.do",
                data:formData,
                type: "post",
                // dataType : "json",//返回数据的类型
                async: false,
                cache: false,
                contentType: false,//发送数据的类型
                processData: false,
                beforeSend:function(){
                    $("#tip").html("<span style='color:blue'>正在处理...</span>");
                    return true;
                },
                success:function(data, status){
                    console.log("请求成功返回数据============="+status);
                    if(status == "success"){
                        alert("添加成功-------")
                        $("#tip").html("<span style='color:blueviolet'>恭喜，添加配置成功！</span>");
                        setTimeout(fn, 1000);
                        function  fn(){
                            document.getElementById("close").click();
                        }
                        toastr.success(data.ms);
                    }else{
                        $("#tip").html("<span style='color:red'>失败，请重试</span>");
                        toastr.info(data.ms);
                    }
                },
                error:function(){
                    toastr.error('请求出错!');
                },
                complete:function(){
                    $('#addModal').hide();
                }
            });
        return false;
    }

3.Spring配置文件applicationContext.xml   中增加上传文件的配置

    <!--文件上传使用， 配置multipartResolver，id名为约定好的 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 配置文件（每次上传的所有文件总大小)大小，单位为b, 1024000表示1000kb  -->
        <property name="maxUploadSize" value="102400000" />
    </bean>
    <!--PropertiesFactoryBean对properties文件可用 ，可以用来注入properties配置文件的信息 -->
    <bean id="uploadProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
        <property name="location" value="classpath:upload.properties"></property>
    </bean>

4.文件上传的工具类

（一）上传到服务器

@Component(value="fileUploadUtils")
public class FileUploadUtil {
    @Value("#{uploadProperties.path}")
    private String path;
    private String getExtName(MultipartFile file){
        return FilenameUtils.getExtension(file.getOriginalFilename());
    }
    private String createNewName(MultipartFile file){
        return UUID.randomUUID().toString()+"."+getExtName(file);
    }
    public String uploadFile(MultipartFile file){
        try {
            String newName=createNewName(file);
            FileUtils.copyInputStreamToFile(file.getInputStream(), new File(path,newName ));
            return newName;
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}

（二）通过ftp远程上传

public class FtpUtil {
    /**
     * Description: 向FTP服务器上传文件
     * @param host FTP服务器hostname
     * @param port FTP服务器端口
     * @param username FTP登录账号
     * @param password FTP登录密码
     * @param basePath FTP服务器基础目录
     * @param filePath FTP服务器文件存放路径。例如分日期存放：/2015/01/01。文件的路径为basePath+filePath
     * @param filename 上传到FTP服务器上的文件名
     * @param input 输入流
     * @return 成功返回true，否则返回false
     */
    public static boolean uploadFile(String host, int port, String username, String password, String basePath,
                                     String filePath, String filename, InputStream input) {
        boolean result = false;
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(host, port);// 连接FTP服务器
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(username, password);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            //切换到上传目录
            if (!ftp.changeWorkingDirectory(basePath+filePath)) {
                //如果目录不存在创建目录
                String[] dirs = filePath.split("/");
                String tempPath = basePath;
                for (String dir : dirs) {
                    if (null == dir || "".equals(dir)) continue;
                    tempPath += "/" + dir;
                    if (!ftp.changeWorkingDirectory(tempPath)) {
                        if (!ftp.makeDirectory(tempPath)) {
                            return result;
                        } else {
                            ftp.changeWorkingDirectory(tempPath);
                        }
                    }
                }
            }
            //设置上传文件的类型为二进制类型
            ftp.setFileType(FTP.BINARY_FILE_TYPE);
            //上传文件
            if (!ftp.storeFile(filename, input)) {
                return result;
            }
            input.close();
            ftp.logout();
            result = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }

    /**
     * Description: 从FTP服务器下载文件
     * @param host FTP服务器hostname
     * @param port FTP服务器端口
     * @param username FTP登录账号
     * @param password FTP登录密码
     * @param remotePath FTP服务器上的相对路径
     * @param fileName 要下载的文件名
     * @param localPath 下载后保存到本地的路径
     * @return
     */
    public static boolean downloadFile(String host, int port, String username, String password, String remotePath,
                                       String fileName, String localPath) {
        boolean result = false;
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(host, port);
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(username, password);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            ftp.changeWorkingDirectory(remotePath);// 转移到FTP服务器目录
            FTPFile[] fs = ftp.listFiles();
            for (FTPFile ff : fs) {
                if (ff.getName().equals(fileName)) {
                    File localFile = new File(localPath + "/" + ff.getName());

                    OutputStream is = new FileOutputStream(localFile);
                    ftp.retrieveFile(ff.getName(), is);
                    is.close();
                }
            }

            ftp.logout();
            result = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }
    public static void main(String[] args) {
        try {
            FileInputStream in=new FileInputStream(new File("D:\\temp\\image\\gaigeming.jpg"));
            boolean flag = uploadFile("192.168.25.133", 21, "ftpuser", "ftpuser", "/home/ftpuser/www/images","/2015/01/21", "gaigeming.jpg", in);
            System.out.println(flag);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }
}

5.实体AppiumConfig中增加文件类型的属性

    private MultipartFile[] files;

6.控制层controller中，实现上传功能，保存上传文件的路径到实体

                    MultipartFile[] files = AppiumConfig.getFiles();
//                    System.out.println("真实路径：" + application.getRealPath("/"));
                    String path =application.getRealPath("/");
                    for (MultipartFile multipartFile : files) {
//                        System.out.println("文件类型：" + multipartFile.getContentType());
//                        System.out.println("文件控件名：" + multipartFile.getName());
//                        System.out.println("文件名：" + multipartFile.getOriginalFilename());
//                        System.out.println("文件大小：" + multipartFile.getSize());
                        try {
                            FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(application.getRealPath("/") + "upload/" + multipartFile.getOriginalFilename()));
                        } catch (IOException e) {
                            e.printStackTrace();
                        }   path +=multipartFile.getOriginalFilename();
                    }
                    AppiumConfig.setApkupload(path);

spring mvc框架+ ajax实现 文件上传

猜你喜欢

spring mvc框架+ ajax实现文件上传