• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax 上传图片并预览的简单实现

    1. 直接上最简单的 一种 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 {
          ListFileItem> 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();
        }
      }

    2. 这里会 用到一个 ajaxupload.js, 网上多得很。

    以上就是小编为大家带来的Ajax 上传图片并预览的简单实现的全部内容了,希望对大家有所帮助,多多支持脚本之家~

    您可能感兴趣的文章:
    • jQuery AjaxUpload 上传图片代码
    • php+ajax无刷新上传图片实例代码
    • swfupload ajax无刷新上传图片实例代码
    • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
    • JQuery+ajax实现批量上传图片(自写)
    • Jquery ajaxsubmit上传图片实现代码
    • AJAX实现图片预览与上传及生成缩略图的方法
    • 基于HTML5的可预览多图片Ajax上传
    • 用ajax实现预览链接可以看到链接的内容
    • Ajax上传图片及上传前先预览功能实例代码
    上一篇:Ajax如何传输Json和xml数据
    下一篇:AJAX实现图片预览与上传及生成缩略图的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax 上传图片并预览的简单实现 Ajax,上传,图片,并,预览,