核心代码
var AjaxFileInput=function(opts){
var settings={
container:""
,inputFileElement:""
,onValidate:function(fileName,fileDom){
return true;
}
,max_size:5*1024*1024
,url:""
,beforeUpload:function(paras){
}
,onError:function(errorMsg){
}
,onComplete:function(serverResult){
}
};
$.extend(settings,opts);
var _container=$(settings.container);
var _currentFileButton={};
_currentFileButton=$(settings.inputFileElement);
var _tpl_file_html=_container.html();
var userIEMode=false;
if(window.FileReader==undefined){
userIEMode=true;
}
var innerTools={
getBase4FromImgFile:function(file,callBack){
var reader = new FileReader();
reader.onload = function(e) {
var base64Img= e.target.result;
if(callBack){
callBack(base64Img);
}
};
reader.readAsDataURL(file);
}
};
var _rid="rid_"+util.getRandomWords(5)+"_"+new Date().getTime();
var _form_id="form_"+_rid;
var _ifr_id="ifr_"+_rid;
var el_iframe={};
var el_form={};
var isBusy=false;
var _i_app={
init:function(){
var me=this;
if(userIEMode){
me.initIEForm();
}
me.resetFileInput(settings.inputFileElement);
}
,initIEForm:function(){
var me=this;
var _ifr_html='<iframe id="__ifr_id__" name="__ifr_id__" style="position: absolute; opacity: 0.0; visibility: visible; left:0;top:0; width:100px; height: 50px;"></iframe>';
_ifr_html=_ifr_html.replace(/__ifr_id__/g,_ifr_id);
var _form_html='<form id="__form_id__" action="__url__" target="__ifr_id__" method="post" enctype="multipart/form-data" style="border: 1px solid;" ></form>';
_form_html=_form_html.replace(/__ifr_id__/g,_ifr_id);
_form_html=_form_html.replace(/__form_id__/g,_form_id);
_form_html=_form_html.replace(/__url__/g,settings.url);
el_form=$(_form_html);
el_iframe=$(_ifr_html);
$(document.body).append(el_form);
$(document.body).append(el_iframe);
me.initIFrameLoaded();
}
,initIFrameLoaded:function(){
var me=this;
var ifr_json=document.getElementById(_ifr_id);
function handle_return(){
var doc = ifr_json.contentDocument || ifr_json.document;
var _json_str=doc.body.innerText;
var res={};
try{
res=JSON.parse(_json_str);
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
settings.onComplete(res);
}
catch(ex){
res=_json_str;
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
settings.onError(_json_str);
}
}
if (ifr_json.attachEvent){
ifr_json.attachEvent("onload", function(){
handle_return();
});
} else {
ifr_json.onload = function(){
handle_return();
};
}
}
,uploadByForm:function(paras){
var me=this;
el_form.empty();
el_form.append('<input type="submit" value="提交">');
for(var key in paras){
var _hide_val=$('<input type="hidden" value="" name="'+key+'">');
_hide_val.val(paras[key]);
el_form.append(_hide_val);
}
if(util.checkEmpty(_currentFileButton.attr("name"))){
_currentFileButton.attr("name","file");
}
el_form.append(_currentFileButton);
setTimeout(function(){
el_form[0].submit();
},20);
}
,uploadByHttpRequest:function(paras){
var me=this;
var file=$(_currentFileButton)[0].files[0];
var xhr = new XMLHttpRequest();
function uploadFile() {
var fd = new FormData();
var _uploadKey="file";
if(util.checkEmpty(_currentFileButton.attr("name"))==false){
_uploadKey=_currentFileButton.attr("name");
}
fd.append(_uploadKey, file);
for(var key in paras){
fd.append(key,paras[key]);
}
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", settings.url);
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
}
else {
}
}
function uploadComplete(evt) {
if(evt.target.status!=200){
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
settings.onError(evt.target.status+"错误");
}
else{
var res_json="";
try{
res_json=JSON.parse(evt.target.responseText);
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
settings.onComplete(res_json);
}
catch(ex){
res_json=evt.target.responseText;
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
settings.onError(res_json);
}
}
}
function uploadFailed(evt) {
settings.onError("上传失败");
}
function uploadCanceled(evt) {
}
uploadFile();
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
}
,resetFileInput:function(__file_input){
var me=this;
var _fileInput=$(__file_input);
var _fileDom=_fileInput[0];
_currentFileButton=_fileInput;
$(_fileInput).change(function(){
var _fake_path=_fileDom.value;
var __theFileName="";
if(util.checkEmpty(_fake_path)){
}
else{
if(_fake_path.indexOf("\\")!=-1){
var arr2=_fake_path.split("\\");
__theFileName=arr2[arr2.length-1];
}
else if(_fake_path.indexOf("/")!=-1){
var arr2=_fake_path.split("/");
__theFileName=arr2[arr2.length-1];
}
}
if(settings.onValidate(__theFileName,_fileDom)==false){
isBusy=false;
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
return;
}
if(util.checkEmpty(_fake_path)==true){
var _new_file_input=$(_tpl_file_html);
me.resetFileInput(_new_file_input);
_container.empty().append(_new_file_input);
return;
}
var _paras={
};
settings.beforeUpload(_paras);
if(userIEMode){
me.uploadByForm(_paras);
}
else{
me.uploadByHttpRequest(_paras);
}
});
}
};
_i_app.init();
}
html代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<jsp:include page="inc.js.jsp"></jsp:include>
<script type="text/javascript" src="/static/vendor/AjaxFileInput/main.js"></script>
</head>
<body>
<h1>file input文件上传插件兼容处理---兼容ie6-11,chrome,ff,ipad,ios及安卓</h1>
<input type="hidden" class="ipt" name="identityimagefront" id="identityimagefront">
<div style="position: relative;">
<img style="width: 108px; height: 108px;;" id="preview-front" ></span>
<div id="front-container" style="position: absolute; left:0;top:0; opacity:0.0; width:108px;height:108px; cursor: pointer;border:1px solid green;background-color: slategray;">
<input type="file" id="file-chooser-front" style=" position: absolute; left:0;top:0; opacity:0.0; width:100%;height:100%; cursor: pointer; "/>
</div>
</div>
<p class="tip mb10 ml90">支持 jpg , png , gif 大小在5M以内的图片</p>
<script>
AjaxFileInput({
container:$("#front-container")
,inputFileElement:$("#file-chooser-front")
,url:"/service/singleImageUpload.jsp"
,onError:function(errorMsg){
var _notice=new NotificationFx({
type:"error"
,message:errorMsg
});
_notice.show();
}
,onValidate:function(__theFileName,_fileDom){
if(util.checkEmpty(__theFileName)){
var _notice=new NotificationFx({
type:"error"
,message:"请选择图片"
});
_notice.show();
return false;
}
if(!new RegExp("(jpg|jpeg|gif|png|bmp)+","gi").test(__theFileName)){
var _notice=new NotificationFx({
type:"error"
,message:"只支持jpg、jpeg、gif、png、bmp等图片格式。"
});
_notice.show();
return false;
}
if(_fileDom.files!=null&&_fileDom.files.length>0){
var oFile=_fileDom.files[0];
if(oFile.size>1024*1024*5){
var _notice=new NotificationFx({
type:"error"
,message:"最大只能上传5Mb的图片"
});
_notice.show();
return false;
}
}
return true;
}
,onComplete:function(jsonObj){
if(jsonObj.error==0){
var _notice=new NotificationFx({
type:"success"
,message:"成功上传"
});
_notice.show();
$("#preview-front").attr("src",jsonObj.url);
}
else{
var _notice=new NotificationFx({
type:"error"
,message:"格式错误"
});
_notice.show();
}
}
});
</script>
</body>
</html>
上传处理代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%
String savePath = application.getRealPath("/") + "uploads/";
String saveUrl = request.getContextPath() + "/uploads/";
System.out.println(savePath);
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
long maxSize = 1000000;
response.setContentType("text/html; charset=UTF-8");
if(!ServletFileUpload.isMultipartContent(request)){
out.println(getError("请选择文件。"));
return;
}
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
uploadDir.mkdirs();
}
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if(!extMap.containsKey(dirName)){
out.println(getError("目录名不正确。"));
return;
}
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
if(item.getSize() > maxSize){
out.println(getError("上传文件大小超过限制。"));
return;
}
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
}catch(Exception e){
out.println(getError("上传文件失败。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
out.println(obj.toJSONString());
}
}
%>
<%!
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toJSONString();
}
%>