js获取上传的文件并用ajax提交
<form id="form1" name="form1" encType="multipart/form-data" method="post">
<input type="file" id="file" name="file" style="width:450">
<INPUT type="submit" value="上传文件" id="file_upload">
<br>
<font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>
</form>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('#file_upload').click(function(e){
e.preventDefault();
var data = new FormData();
var files = $('#file')[0].files;
if (files) {
data.append('imageFile',files[0]);
}
$.ajax({
cache: false,
type: 'post',
dataType: 'json',
url:'/web/file/getJsoncallback',
data :data,
contentType: false,
processData: false,
success : function (data) {
alert(1);
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="leave" class="page navbar-fixed">
<div class="navbar m-navbar s-navbar-blue">
<div class="navbar-inner">
<a href="#" class="left u-arrow-left back link"></a>
<div class="center">请假</div>
<!-- <div class="center">采购申请</div> -->
</div>
</div>
<div class="page-content">
<form id="js_form" enctype="multipart/form-data">
<div class="list-block m-list">
<li class="images f-cb">
<div class="imgtxt">上传图片</div>
<ul>
<li>
<div class="addimg"><input type="file" class="js_addimg" multiple > <input type="hidden"/></div>
</li>
</ul>
</li>
</div>
<div class="m-tit">抄送人</div>
<div class="m-approveFlow f-cb">
<ul class="crosswise f-cb">
<li class="item f-cb">
<a href="./tool_person.html?sel=11">
<i class="add"></i>
</a>
</li>
</ul>
</div>
<div class="m-btn">
<a class="btn big blue radius" href="javascript:;">提交</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
var base={};
base.imgUploadUrl = "http://172.16.41.106:8083";
var $$=$=jQuery;
//tools
var tools = {};
tools.uploadImg = function() {
var req = null;
$$(".js_addimg").on("change", function() {
var _self = $(this);
//本地预览
var _path = window.URL.createObjectURL(this.files[0]);
$$('<li><img src="' + _path + '"></li>').insertBefore(_self.parent().parent());
//上传预览
var formData = new FormData();
formData.append('imageFile', this.files[0]);
if (req != null) {
return false;
}
req = $.ajax({
url: base.imgUploadUrl + "web/file/getJsoncallback",
//url:"http://127.0.0.1:3000/jsonp",
type: 'POST',
data: formData,
dataType: "json",
jsonp: 'jsonpcallback',
async: false,
cache: false,
contentType: false,
processData: false,
success: function(ret) {
req = null;
if (ret.success) {
debugger;
$$('<li><img src="' + base.imgUrl + ret.data["thumbnailUrl"] + '"></li>').insertBefore(_self.parent().parent());
} else {
$.hint(ret.msg);
}
},
error: function(ret) {
req = null;
$.hint("网络出错");
}
})
});
}
function imgUpload(el, params) {
window.arr=[];
var defaultParams = {
uploadLimit: 0, //上传图片张数限制，0为不限制
_uploadLimit: 0, //已上传图片张数
imgSize: '30',//以M为单位
fileTypeExts: '*.jpg,*.jpe,*.jpeg,*.png,*.gif'
};
var _params = $.extend({}, defaultParams, params);
var el = $(el);
if (_params['uploadLimit'] == 1) {
el.removeAttr('multiple');
}
el.on("change", function() {
var _self = $(this);
var imgs=[];
var files=_self.get(0).files;
//图片上传前过滤
if( _params['uploadLimit']!=0&& files.length+_uploadLimit>_params['uploadLimit']){
alert('最多上传"' +_params['uploadLimit'] + '"张图片');
return false;
}
if (_params['imgSize']) {
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("image") == 0) {
if (file.size >= _params['imgSize']*1024*1024) {
alert('您这张"' + file.name + '"图片大小过大，应小于'+_params['imgSize']+"M");
} else {
imgs.push(file);
}
} else {
alert('文件"' + file.name + '"不是图片。');
}
}
}else{
imgs=files;
}
//本地预览
/* var _path = window.URL.createObjectURL(this.files[0]);
$$('<li><img src="' + _path + '"></li>').insertBefore(_self.parent().parent()); */
//上传预览
for(var i=0;i<imgs.length;i++){
var formData = new FormData();
formData.append('imageFile', imgs[i]);
$.ajax({
url: base.imgUploadUrl + "/web/file/getJsoncallback",
type: 'POST',
data: formData,
dataType: "json",
async: false,
cache: false,
contentType: false,
processData: false,
success: function(ret) {
if (ret.success) {
$$('<li><img src="' + base.imgUrl + ret.data["thumbnailUrl"] + '"></li>').insertBefore(_self.parent().parent());
_params['_uploadLimit']+=_params['_uploadLimit'];
arr.push(ret.data["thumbnailUrl"] )
} else {
$.hint(ret.msg);
}
},
error: function(ret) {
req = null;
$.hint("网络出错");
}
})
}
});
}
$(function(){
imgUpload($(".js_addimg"))
});
</script>
</body>
</html>
js获取上传的文件并用ajax提交的更多相关文章
- js获取上传的文件名称
<input name="file_" type="file" id="file_" size="100" /&g ...
- 怎么通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端？
今天在论坛上看到这样一个问题,有必要编辑搜集下. 问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name= ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- Atitit.js获取上传文件全路径
Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...
- js获取上传文件内容
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- js+分布上传大文件
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- JS获取上传文件的绝对路径，兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
- JS获取上传文件的名称、格式、大小
<input id="File1" type="file" onchange="checkFile(this)" /> 方式一) ...
随机推荐
- [转]C#网络编程(订立协议和发送文件) - Part.4
本文转自:http://www.tracefact.net/CSharp-Programming/Network-Programming-Part4.aspx 源码下载:http://www.trac ...
- 在一周内学会使用 AUTO CAD
学习目的: 1.使用AUTO CAD绘制电路板外框.元器件封装: 2.借助软件使用,对产品结构有更深入的体会. 学习过程: 1.由于本人急需在短时间内具备简单的二维绘图能力,故没有借鉴.对比网络上其他 ...
- Episode 388: Testing vs Monitoring
A user-facing bug causes search results to be unavailable for your service. Someone suggests adding ...
- maven总结5
上篇文章中项目最终发布的release仓库和快照仓库都是nexus的默认仓库,若所有的本地开发项目版本都发布到同一个仓库,可能会造成冲突.因此,我们可以为每一个项目创建一组仓库(快照版本和releas ...
- SQL Server的各种聚合函数
聚合函数是对一组值执行计算并返回单一的值的函数,它经常与SELECT语句的GROUP BY子句一同使用,SQL SERVER 中具体有哪些聚合函数呢?我们来一一看一下: 1. AVG 返回指定组中的平 ...
- poj1573 Robot Motion
Robot Motion Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12507 Accepted: 6070 Des ...
- Apache 的搭建及vim的简单命令
一. vim 简单命令 pwd 当前路径 ls 当前路径所有目录 cd 目录地址 跳转到指定目录 /xxx 查找xxx x 删除当前字符 n 执行上一次查找 二.为什么使用apa ...
- MysqlHelper 需要重写
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;u ...
- DEDECMS之六 网站地图、RSS地图
在用织梦CMS做网站的都知道,在它的robots.txt是屏蔽掉了data目录的,可是,不巧dedecms默认的网站地图是在data下的,为了让蜘蛛更好的爬行,有必要将dedecms生成的网站地图放在 ...
- JavaScript操作XML
JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准 ...