广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >Ajax 中怎么上传图片并预览
  • 964
分享到

Ajax 中怎么上传图片并预览

ajax 2022-10-19 07:10:02 964人浏览 八月长安
摘要

ajax 中怎么上传图片并预览,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。html:<!DOCTYPE ht

ajax 中怎么上传图片并预览,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

html:

<!DOCTYPE html>
<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传 | cookie</title>
</head>
<body>
  file: <input type="file" id="images" name="image" /><br><br>
  desc: <input type="text" id="desc" name="desc" /><br><br>
  <input type="button" value="upload" onclick="upload();">
  
  <div class="images"></div>
  
<script type="text/javascript" src="js/Jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript">
  function upload() {
    $.ajaxFileUpload({
      url : 'upload.htm',
      fileElementId : 'images',
      dataType : 'JSON',
      data : {desc : $("#desc").val()},
      success : function(data) {
        var html = $(".images").html();
        html += '<img width="100" height="100" src="/HotelManager/upload/' + data.url + '">'
        $(".images").html(html);
      }
    })
    return false;
  }
</script>
</body>
</html>

servlet:

protected void doPost(httpservletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    DiskFileItemFactory factory = new DiskFileItemFactory();
    
    ServletFileUpload upload = new ServletFileUpload(factory);
    
    String path = request.getServletContext().getRealPath("/upload");
    String name = null;
    try {
      List<FileItem> items = upload.parseRequest(request);
      for (FileItem item : items) {
        if(item.isFORMField()){
          System.out.println(item.getFieldName() + ": " + item.getString());
        } else {
          name = item.getName();
          item.write(new File(path,name));
        }
      }
      PrintWriter out = response.getWriter();
      out.print("{");
      out.print("url:\"" + name +"\"");
      out.print("}");
      
    } catch (Exception e) {
      e.printStackTrace();
    }
  }

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网VUE频道,感谢您对编程网的支持。

--结束END--

本文标题: Ajax 中怎么上传图片并预览

本文链接: https://www.lsjlt.com/news/77495.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Ajax 中怎么上传图片并预览
    Ajax 中怎么上传图片并预览,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。html:<!DOCTYPE ht...
    99+
    2022-10-19
    ajax
  • 使用Ajax怎么上传图片并预览
    使用Ajax怎么上传图片并预览?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然...
    99+
    2023-06-08
  • React+ajax+java如何实现上传图片并预览功能
    小编给大家分享一下React+ajax+java如何实现上传图片并预览功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!之前有在网上找ajax上传图片的资料,大部...
    99+
    2023-06-08
  • javascript input图片上传及预览,FileReader预览图片
    FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它。 <!DOCTYPE html> ...
    99+
    2022-11-12
    JavaScript input图片上传 JavaScript FileReader预览图片
  • html5怎么实现图片上传预览
    这篇文章主要介绍“html5怎么实现图片上传预览”,在日常操作中,相信很多人在html5怎么实现图片上传预览问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5怎么实现图...
    99+
    2022-10-19
    html5
  • HTML5可预览多图片如何使用Ajax上传
    这篇文章主要介绍了HTML5可预览多图片如何使用Ajax上传,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、关于图片上传什么什么的在XHT...
    99+
    2022-10-19
    ajax html5
  • vue.js如何实现图片转Base64上传图片并预览
    这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base6...
    99+
    2022-10-19
    vue base64
  • 如何实现Ajax上传图片及上传前先预览功能
    这篇文章将为大家详细讲解有关如何实现Ajax上传图片及上传前先预览功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。上传之前的预览方式一先来说说图片上传之前的预览问题。这...
    99+
    2022-10-19
    ajax
  • angularjs怎么实现多张图片上传并预览功能
    这篇文章主要介绍angularjs怎么实现多张图片上传并预览功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下directive.js    angu...
    99+
    2022-10-19
    angularjs
  • Html5怎么实现上传本地图片并预览功能
    小编给大家分享一下Html5怎么实现上传本地图片并预览功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近工作中需要H5上传显...
    99+
    2022-10-19
    html5
  • JavaScript图片上传并预览的完整实例
    目录一、前端界面是通过jqgrid展示的二、jqgrid特性三、代码实例1、jqgrid页面展示2、模块页面3、ajax实现异步请求五、效果展示总结一、前端界面是通过jqgrid展示...
    99+
    2022-11-13
    js实现图片上传预览 js实现图片预览 js 上传图片
  • html5中怎么实现图片上传预览功能
    今天就跟大家聊聊有关html5中怎么实现图片上传预览功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。<!DOCTYPE html&...
    99+
    2022-10-19
    html5
  • 怎么用PHP+Ajax实现无刷新上传头像图片预览功能
    这篇文章主要讲解了“怎么用PHP+Ajax实现无刷新上传头像图片预览功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用PHP+Ajax实现无刷新上传头...
    99+
    2022-10-18
    php ajax
  • jQuery如何实现点击头像上传并预览图片
    这篇文章主要为大家展示了“jQuery如何实现点击头像上传并预览图片”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现点击头像上传并预览图片”这...
    99+
    2022-10-19
    jquery
  • Nodejs中怎么实现图片上传和压缩预览功能
    这篇文章给大家介绍Nodejs中怎么实现图片上传和压缩预览功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1、引入基本配置const Koa = req...
    99+
    2022-10-19
    nodejs
  • Vue+SSM实现图片上传预览效果
    现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上。 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库...
    99+
    2022-11-12
    vue上传预览 vue图片上传预览 vue图片上传
  • javascript如何实现图片预览和上传
    小编给大家分享一下javascript如何实现图片预览和上传,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下var dailiApply = { ...
    99+
    2022-10-19
    javascript
  • AngularJs如何实现上传前预览图片
    小编给大家分享一下AngularJs如何实现上传前预览图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!demo.html:&l...
    99+
    2022-10-19
    angularjs
  • thinkphp5加layui实现图片上传功能(带图片预览)
    目录1、引入文件2、HTML部分3、功能实现4、后台处理图片上传保存内容网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在...
    99+
    2023-03-11
    thinkphp5加layui实现图片上传功能 layui图片上传 thinkphp5图片上传
  • 详解nodejs实现本地上传图片并预览功能(express4.0+)
    Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所...
    99+
    2022-06-04
    上传图片 详解 功能
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作