JS form表单图片上传
// 点击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表单图片上传的更多相关文章
- form表单图片上传
1.前端页面 <div class="tkDiv" id="addLOGO" style="display:none;z-index:12;wi ...
- MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)
form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( ) { in ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传
Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV 在Django中存 ...
- form表单文件上传提交且接口回调显示提交成功
前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...
- Ajax serialize()提交form表单不能上传file类型
前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...
- 【温故知新】Java web 开发(三)Form表单与上传下载文件
简介:在一和二的基础之上,这次来记录下如何在页面提交表单数据,以及文件的上传和下载整个流程,请求也不仅限于GET了,也有POST了. 1. 为了方便,在 webapp 下直接新建一个 index.ht ...
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- JAVA入门[16]-form表单,上传文件
一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...
随机推荐
- [转] C语言常见笔试题大全1
点击阅读原文 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEAR (60 * 60 * 24 * 365UL) [ ...
- linux Nginx VirtualHost虚拟主机多站点设置
linux系统CentOS7 Nginx1.9.9 一台nginx服务器同一IP被注册多个不同域名,访问不同域名到该服务器后请求不同项目 本台nginx服务器的IP地址为 192.168.155.12 ...
- Java菜鸟培训第二天
HTML——超文本标记语言…………… 静态网页:不需要访问数据库. 动态网页:在网上发布的好的,我们能通过网络浏览到的都是动态的,需要访问数据库. <html>--开始标签 <hea ...
- [问题2014A10] 复旦高等代数 I(14级)每周一题(第十二教学周)
[问题2014A10] 设 \(A\) 为 \(n\) 阶实方阵满足 \(AA'=I_n\) (即 \(A\) 为 \(n\) 阶正交阵), 证明: \[\mathrm{rank}(I_n-A)=\ ...
- NSUrl的打印
1转自 http://my.oschina.net/wangdk/blog/165554: NSURL *url = [NSURL URLWithString:@"http://www.ba ...
- Flex http请求
下面类支持POST和GET请求,请求数据和出错将返回 package com.sole.util { import flash.events.Event; import flash.events.HT ...
- ie兼容问题整理
1.连续发请求问题 * jquery(document).ready(function(){}) * 连续发请求ie8出问题,被拦截问题,url后边加时间戳 * 例 url : url+ ...
- (转)Uiautomator——API详解
原文链接:http://www.cnblogs.com/by-dream/p/4921701.html#3328376 以一个简单的例子开始吧.我们完成一个 " 打开QQ,进入QQ空间,然后 ...
- CSS使用总结
1.visibility和display的区别: visibility:visible; 显示visibility:hidden; 隐藏,但是保留元素所占的空间display:block; ...
- C++学习笔记一 —— 两个类文件互相引用的处理情况
先记录一些零碎的知识点: 1. 一个类可以被声明多次,但只能定义一次,也就是可以 class B; class B; class B; ……; class B {……}; 这样子. 2. 一个 ...