Ajax实现单图片上传，多图片上传，以及和对象的综合上传

最新推荐文章于 2024-09-19 13:22:45 发布
最新推荐文章于 2024-09-19 13:22:45 发布
阅读量1.7k 收藏 7
点赞数 2
分类专栏： JAVA开发 文章标签： Ajax上传单个图片 Ajax上传多个图片 Ajax单个图片，多个图片和对象综合上传 Ajax图片上传 Ajax文件上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38310446/article/details/87623991
版权

前言：本篇文章主要讲述Ajax和FormData对象配合实现单图片上传，多图片上传，以及和对象的综合上传的功能；上篇博客写了form表单实现上传预览，单图片上传，多图片上传，以及和对象的综合上传的前后端代码。本篇前端不再过多赘述，不涉及预览，只写了简单html代码，后端代码一致，只贴JS。

如有疑惑，请参考上一篇：https://blog.csdn.net/qq_38310446/article/details/87458267

1. Ajax图片上传前端代码

  • 1.1 Ajax上传单图片Html代码：

<h1>
    ajax上传单个图片
</h1>
<form id="fileForm" name="fileForm" action="#" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="button" value="提交">
</form>

  • 1.2 Ajax上传单图片JS代码：

/**
     * ajax上传单个图片
     */
    $("#fileForm input[type='button']").click(function () {
        /**
         * 特别注意：fileForm指的是form表单属性name的值
         * file是指input控件的name
         * */
        var file = document.fileForm.file.files[0];
        //ormData是Html5新加进来的一个类,可以模拟表单数据
        var fm = new FormData();
        fm.append('file', file);
        //进行Ajax请求
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型,可以不设置
            url: "/admin/company/addCompany",//url
            data: fm,
            async: false,
            cache: false,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            success: function (p) {
                alert("上传成功")
            }
            // error: function () {
            //     alert("异常！");
            // }
        });
    });

  • 1.3 Ajax上传多图片Html代码：


<h1>ajax上传多个图片</h1>
<form id="filesForm" name="filesForm" action="#" method="post" enctype="multipart/form-data">
    <input type="file" name="files" multiple="multiple"/>
    <input type="button" value="提交">
</form>

  • 1.4 Ajax上传多张图片Js代码：

/**
     * ajax上传多个图片
     */

    $("#filesForm input[type='button']").click(function () {
        var form=new FormData();
        /**
         * 特别注意：fileForm,file是指form表单属性name的值
         * files是指一个数组
         * */
        var files = document.filesForm.files.files;
        for (var i=0;i<files.length;i++){
            form.append("files",files[i])
        }
        // //进行Ajax请求
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型,可以不设置
            url: "/admin/company/addManyCompany",//url
            data: form,
            async: false,
            cache: false,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            success: function () {
                alert("上传成功")
            }
            // error: function () {
            //     alert("异常！");
            // }
        });
    });

  • 1.5 Ajax单个图片，多个图片，对象，综合上传HTML代码：

<h1>添加对象以及单个图片和多个图片</h1>
<form id="fileAndFilesAndObject" name="fileAndFilesAndObject" action="#" method="post" enctype="multipart/form-data">
    企业名称：<input type="text" name="name"><br>
   手机号： <input type="text" name="mobile"><br>
   邮箱： <input type="email" name="email"><br>
    企业logo<input type="file" name="file">
    企业图片<input type="file" name="files" multiple="multiple">
    <input type="button" value="提交">
</form>

  • 1.6 Ajax综合上传Js代码：

  /**
     * 上传单个图片，多个图片，以及对象
     */
    $("#fileAndFilesAndObject input[type='button']").click(function () {
        var form=new FormData();
        /**
         * 特别注意：fileAndFilesAndObject,file是指form和input中name的值
         * files是指一个数组
         * */
        var file = document.fileAndFilesAndObject.file.files[0];
        form.append("file",file);
        var files=document.fileAndFilesAndObject.files.files;
        for (var i=0;i<files.length;i++){
            form.append("companyFiles",files[i])
        }
        var name=$("#fileAndFilesAndObject input[type='name']").val();
        var mobile=$("#fileAndFilesAndObject input[type='mobile']").val();
        var email=$("#fileAndFilesAndObject input[type='email']").val();
        form.append("name",name);
        form.append("mobile",mobile);
        form.append("email",email);
        // //进行Ajax请求
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型,可以不设置
            url: "/admin/company/addCompanyOneAndMore",//url
            data: form,
            async: false,
            cache: false,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            success: function () {
                alert("上传成功")
            }
            // error: function () {
            //     alert("异常！");
            // }
        });
    });

有的小伙伴不知道后台上传的方法，，，在这里追贴一下当时的方法吧。

2.上传后端代码


    /**
     * 上传多图片和添加企业信息
     *
     * @param request
     * @param file
     * @param companyFiles
     * @param productFiles
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/addCompanyOneAndMore")
    public String addCompanyOneAndMore(
            HttpServletRequest request,
            @ModelAttribute CompanyEntity companyEntity,
            @RequestParam("file") MultipartFile file,
            @RequestParam("companyFiles") MultipartFile[] companyFiles,
            @RequestParam("productFiles") MultipartFile[] productFiles,Model model) throws IOException {
        boolean b = Utils.uploadOneFile(request, file);
        if (b) {
            String urls = (String) request.getSession().getAttribute("imageUploadUrl");
            System.out.println("单个图片上传路径" + urls);
            companyEntity.setLogo(urls);
        }
        boolean b1 = Utils.uploadManyFiles(request, companyFiles);
        if (b1) {
            String urls = (String) request.getSession().getAttribute("imageUploadUrl");
            System.out.println("企业图片路径" + urls);
            companyEntity.setCompanyImage(urls);
        }
        boolean b2 = Utils.uploadManyFiles(request, productFiles);
        if (b2) {
            String urls = (String) request.getSession().getAttribute("imageUploadUrl");
            System.out.println("企业产品路径" + urls);
            companyEntity.setProductImage(urls);
        }
        if (b == true && b1 == true && b2 == true) {
            companyService.addCompany(companyEntity);
            model.addAttribute("msg","企业信息添加成功！");
            model.addAttribute("address","/admin/company/getCompanyByPage");
            return "/msg/msg";
        }
        model.addAttribute("msg","系统繁忙，企业信息添加失败，请稍后再试！");
        model.addAttribute("address","/admin/company/getCompanyByPage");
        return "/msg/msg";
    }

  • 2.1 上传的工具类

    /**
     * 上传单个文件方法
     * @param request
     * @param file
     * @return
     * @throws IOException
     */
    public static boolean uploadOneFile(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {
        if (!file.isEmpty()) { //如果文件不为空，写入上传路径
            String path = request.getSession().getServletContext().getRealPath("/images/upload"); //上传文件路径
            //文件原始名字
            String filename = file.getOriginalFilename();
            String suffixLast = filename.substring(filename.lastIndexOf("."));  //获取文件后缀
            String newFileName = Utils.getUUID()+suffixLast;     //文件新名字
            File filepath = new File(path, newFileName);
            判断路径是否存在，如果不存在就创建一个
            if (!filepath.getParentFile().exists()) {
                filepath.getParentFile().mkdirs();
            }
            //将上传文件保存到一个目标文件当中
            file.transferTo(new File(path + File.separator + newFileName));
            String imageUrl="/images/upload/"+newFileName;
            request.getSession().setAttribute("imageUploadUrl",imageUrl);
            return true;
        }
        return false;
    }
    /**
     * 上传多个文件方法
     * @param request
     * @param files
     * @return
     */
    public static boolean uploadManyFiles(
            HttpServletRequest request,
            @RequestParam("files") MultipartFile[] files){
        String path = request.getSession().getServletContext().getRealPath("/images/upload");
        try {
//            System.out.println("上传数组图片的长度是"+files.length);
            if (files.length!=0){
                String s="";
                for (int i = 0; i < files.length; i++) {
                    /**
                     * 必须进行判断，否则数组会越界
                     */
                    if (files[i].isEmpty()){
                        return false;
                    }
                    //文件原始名字
                    String filename = files[i].getOriginalFilename();
                    //获取文件后缀
                    String suffixLast = filename.substring(filename.lastIndexOf("."));

                    //文件新名字
                    String newFileName = Utils.getUUID()+suffixLast;
                    File filepath = new File(path, newFileName);
                    if (!filepath.getParentFile().exists()) {
                        filepath.getParentFile().mkdirs();
                    }
                    files[i].transferTo(new File(path + File.separator + newFileName));
                    s+="/images/upload/"+newFileName+"-";
                }
                System.out.println("这是我的图片拼接成的数组字符"+s);
                request.getSession().setAttribute("imageUploadUrl",s);
                return true;
            }
            return false;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }

特别说明：这是当时的代码，符合当时的业务，上传企业和商品信息。 上传的配置以及pom就不贴啦。有不懂得在下方留言，相互交流。

再贴一个上传，，项目本地和target都有，目的是实时获取数据

   public static boolean uploadOneFileLayui(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {
        if (!file.isEmpty()) { //如果文件不为空，写入上传路径
            String realPath = request.getSession().getServletContext().getRealPath("/");
            String path = realPath.split("target")[0];
            path=path+"/src/main/webapp/images/upload";//为了不因为target删除后消失，同事上传到本地
            String path_target = request.getSession().getServletContext().getRealPath("/images/upload"); //上传文件路径
            //文件原始名字
            String filename = file.getOriginalFilename();
            String suffixLast = filename.substring(filename.lastIndexOf("."));  //获取文件后缀
            String newFileName = Utils.getUUID()+suffixLast;     //文件新名字
            File filepath = new File(path, newFileName);
            File target_file = new File(path, newFileName);
            判断路径是否存在，如果不存在就创建一个
            if (!filepath.getParentFile().exists()) {
                filepath.getParentFile().mkdirs();
            }
            //判断target路径
            if (!target_file.getParentFile().exists()) {
                target_file.getParentFile().mkdirs();
            }
            //将上传文件保存到一个目标文件当中
            file.transferTo(new File(path + File.separator + newFileName));
            file.transferTo(new File(path_target + File.separator + newFileName));
            request.getSession().setAttribute("imageUploadUrl",request.getContextPath()+"/images/upload/"+newFileName);
            return true;
        }
        return false;
    }

如有不解，请加java爱好群大家交流：852665736；群里都是热心好客的小伙伴，大家一同进步。

无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注公众号：gh_817962068649

源码plus
关注
专栏目录
ajax 无刷新上传多张图片
07-21
根据用户选择的多张图片类型的文件进行无刷新上传并预览结果，用户可以保存到数据库；
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
10-16
综合上述知识点，文章的完整内容可能围绕着如何使用jQuery结合AJAX上传文件，并通过原生的XMLHttpRequest对象来追踪上传进度。同时，使用layer.js插件提供良好的用户交互体验，并配合PHP脚本来处理服务器端的文件...
基于HTML5的可预览多图片Ajax上传
kindy的开发工作室
05-18 875
本文地址：http://www.zhangxinxu.com/wordpress/?p=1923 一、关于图片上传什么什么的 在XHTML的时代，我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图，做法是借助于flash。例如swfupload.js。可惜，使用复杂的点，比如flash文件需与页面同父文件夹，JavaScript文件大小也很可观。 我之前曾翻译
实现Ajax多图和文件上传的完整指南
最新发布
weixin_31139479的博客
09-19 1703
本文还有配套的精品资源，点击获取 简介：Ajax技术在网页开发中用于无刷新更新页面内容，其核心是通过XMLHttpRequest对象实现异步通信。本主题将深入探讨Ajax在多图和文件上传场景中的应用，涵盖HTML5的File API、JavaScript的请求发送与处理，以及后端数据处理与安全策略。文章将详细解释如何利用这些技术点，使得用户可以在不离开当前页面的情况下上传图...
ajax怎样上传多张图片,多图片Ajax上传
weixin_42519126的博客
08-05 723
控制器代码public function multiUploadImg( Request $request,$ordersn,$step,$stion){// 重组数组，子函数function reArrayFiles( $file_post ) {$file_ary = array();$file_count = count($file_post[‘name‘]);$file_keys = ar...
ajax上传图片
花开也疯狂
09-21 281
index.html              Ajax 上传文件                               var xhr;             function createXMLHttpRequest() {                 if (window.ActiveXObject) {                     xhr =
ajax 同时上传多张图片
BetterGG的博客
10-31 8311
我用下文所示代码书写时，似乎一次只传一张 var formData = new FormData(); formData.append('file', $('#file1')[0].files[0]); formData.append('file', $('#file2')[0].files[0]); ...
上传图片springMVC和ajax
07-11
在IT行业中，SpringMVC和Ajax是两种非常重要的技术，特别是在构建现代Web应用程序时。SpringMVC是一个基于Spring框架的模型-视图...这些都是在设计上传图片功能时需要综合考虑的细节，以提供更加完善和健壮的解决方案。
AJAX图片上传
02-27
AJAX图片上传是一种在不刷新整个网页的情况下，利用JavaScript、XMLHttpRequest对象以及浏览器的异步处理能力，实现图片上传的技术。这种方式提高了用户体验，因为它允许用户在上传图片的同时继续浏览页面的其他部分...
ajax图片上传
05-25
综上所述，Ajax图片上传技术涉及到前端的Ajax通信、FormData处理、文件选择与预览，以及后端的文件接收和处理等多个环节，是一个综合性的前端开发技能。通过使用jQuery和其他辅助库，可以更轻松地实现这一功能。
ajax多图片上传预览
04-14
ajax多图片上传预览，不用存在在本地就可以
MVC+ajaxfileupload实现多图片同时上传
05-18
自己写的一个js的基于ajaxfileupload的多文件上传控件，后端代码用的c#MVC，更多详细讲解参见博客：http://www.cnblogs.com/csqb-511612371/
jQuery多图上传带ajax提交
11-28
jQuery多图上传带ajax提交，实现多图片文件预览，文件上传功能；附带SpringMVC接受图片处理功能
ajax多图和文件上传
11-02
ajax多图和文件上传
多图片Ajax上传
bagumei3955的博客
09-11 539
控制器代码 public function multiUploadImg( Request $request ,$ordersn,$step,$stion){ // 重组数组，子函数 function reArrayFiles( $file_post ) { $file_ary = array(); ...
用AJAX方式上传图片文件
weixin_33769207的博客
02-27 840
2019独角兽企业重金招聘Python工程师标准>>> ...
AJAX——图片上传
weixin_48719464的博客
04-20 1066
3.提交表单数据到服务器，使用图片url网址。2.使用FormData携带图片文件。1.获取图片文件对象。
PHP与AJAX结合实现图片无刷新上传教程
9. 用户界面反馈: 在AJAX上传过程中，通常需要向用户提供即时的反馈，例如上传进度、成功与否的提示等。这通常通过JavaScript修改DOM元素来实现。 10. 压缩包文件使用: 本资源为ZIP格式的压缩包，包含实例开发所需...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值