// 点击file 类型的input 触发的方法

 function changesProvider(){

   // fileProvider -> input中的name属性值 

   var f = document.getElementByName("fileProvider")[0].files;

   // 图片大小判断

   if( f[0].size. > 1024*3*1024 ){

        // 清空form表单中的结构

     $("#formBoxProvider").children.remove();

     // 把原先得结构重新动态添加进去

     $("#formBoxProvider").append( "<label for='uploadProvider' class='label_bg'></label><input id='uploadProvider' onchange='changesProvider()' name='fileProvider' type='file' accept='.jpg, .jpeg, .png'>" );

     message({

       type: "error",

       message: "图片文件不能大于3M"

     })

     return false;

   }

      //先new一个formData对象

   var formData = new FormData( $("#formBoxProvider")[0] );

   //ajax交互

    $.ajax({

     type: 'POST',

     url: '${pageContext.request.contextPath}' + 'serve/provider/image/upload.shtml',

     data: formData,

     contentType: false,

     processData: false,

     success: function (data) {

       if( data.errno == 1 ){

         // 成功必须再次清空form表单中的DOM结构

          // 清空form表单中的结构

         $("#formBoxProvider").children.remove();

         // 把原先得结构重新动态添加进去

         $("#formBoxProvider").append( "<label for='uploadProvider' class='label_bg'></label><input id='uploadProvider' onchange='changesProvider()' name='fileProvider' type='file' accept='.jpg, .jpeg, .png'>" );

         var imagePath = imageUrl + data.data;

         //盒子中具体图片元素
        var imageItem = "<div class='item-box'><span class='detele_sign'><img class='pImage' src='" + imagePath + "'></span></div>";
        #("upload-sign").before(imageItem);
        $(".detele_sign").on("click", function(){          $(this).parents('.item-box').remove();            if($('.item-box').length < 7 ){             $("#upload-sign").show();
          }         });         if($('.item-box').length == 7){           $("#upload-sign").hide();
        }  
    }, //success end
    error: function(data){     }
  }) //ajax end }

JS form表单图片上传的更多相关文章

  1. form表单图片上传

    1.前端页面 <div class="tkDiv" id="addLOGO" style="display:none;z-index:12;wi ...

  2. MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  3. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  4. Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传

    Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV       在Django中存 ...

  5. form表单文件上传提交且接口回调显示提交成功

    前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...

  6. Ajax serialize()提交form表单不能上传file类型

    前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...

  7. 【温故知新】Java web 开发(三)Form表单与上传下载文件

    简介:在一和二的基础之上,这次来记录下如何在页面提交表单数据,以及文件的上传和下载整个流程,请求也不仅限于GET了,也有POST了. 1. 为了方便,在 webapp 下直接新建一个 index.ht ...

  8. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  9. JAVA入门[16]-form表单,上传文件

    一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...

随机推荐

  1. [转] C语言常见笔试题大全1

    点击阅读原文 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 60 * 24 * 365UL) [ ...

  2. linux Nginx VirtualHost虚拟主机多站点设置

    linux系统CentOS7 Nginx1.9.9 一台nginx服务器同一IP被注册多个不同域名,访问不同域名到该服务器后请求不同项目 本台nginx服务器的IP地址为 192.168.155.12 ...

  3. Java菜鸟培训第二天

    HTML——超文本标记语言…………… 静态网页:不需要访问数据库. 动态网页:在网上发布的好的,我们能通过网络浏览到的都是动态的,需要访问数据库. <html>--开始标签 <hea ...

  4. [问题2014A10] 复旦高等代数 I(14级)每周一题(第十二教学周)

    [问题2014A10]  设 \(A\) 为 \(n\) 阶实方阵满足 \(AA'=I_n\) (即 \(A\) 为 \(n\) 阶正交阵), 证明: \[\mathrm{rank}(I_n-A)=\ ...

  5. NSUrl的打印

    1转自 http://my.oschina.net/wangdk/blog/165554: NSURL *url = [NSURL URLWithString:@"http://www.ba ...

  6. Flex http请求

    下面类支持POST和GET请求,请求数据和出错将返回 package com.sole.util { import flash.events.Event; import flash.events.HT ...

  7. ie兼容问题整理

    1.连续发请求问题 *  jquery(document).ready(function(){}) *  连续发请求ie8出问题,被拦截问题,url后边加时间戳    *  例  url : url+ ...

  8. (转)Uiautomator——API详解

    原文链接:http://www.cnblogs.com/by-dream/p/4921701.html#3328376 以一个简单的例子开始吧.我们完成一个 " 打开QQ,进入QQ空间,然后 ...

  9. CSS使用总结

    1.visibility和display的区别: visibility:visible; 显示visibility:hidden; 隐藏,但是保留元素所占的空间display:block;       ...

  10. C++学习笔记一 —— 两个类文件互相引用的处理情况

    先记录一些零碎的知识点: 1. 一个类可以被声明多次,但只能定义一次,也就是可以 class B;  class B;  class B; ……;  class B {……};  这样子. 2. 一个 ...