<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>
