容易上传文件插件
简单上传文件插件
team777.upload.js
js:
;(function(win){
'use strict';
var Team777Upload={
fileUpload:function(){
var options={
title:"图片上传",//窗口标题
//msg:"config消息提示窗！", //消息提示消息
action:"#",//上传地址
css:null,
preview:true,//默认显示缩略图
// type:"store",//存放的子目录
ok:true,//是否显示OK按钮
okTxt:"确认",//oK按钮文字
cancel:true,//是否显示取消按钮
cancelTxt:"取消",//取消按钮文字
cancelCall:function(){
if(console){
console.log("取消按钮消息");
}
},
okCall:function(){
if(console){
console.log("确认按钮消息");
}
}
}
var args=arguments;
if(args.length>0){
if(typeof(args[0])==="string"){
options["msg"]=args[0];
}else if(Team777Common.isJson(args[0])){
if(args[0]){
for(var i in args[0]){
options[i]=args[0][i];
}
}
}
}
showUpload(options);
}
};
//显示上传控件
function showUpload(options){
// var template="";
$(".art-upload-modal .art-upload-cancel").unbind("click");
$(".art-upload-modal .art-upload-file").unbind("change");
$(".art-upload-modal .art-upload-iframe").unbind("load");
$(".art-upload-modal .art-upload-sure").unbind("click");
// $(".art-upload-modal").remove();
if($(".art-upload-modal").length>0){
$(".art-upload-modal").modal('show');
if($(".art-upload-modal .modal-title").length>0){
$(".art-upload-modal .modal-title").html(options.title);
}
/*if($(".art-upload-modal .art-upload-img").length>0){
$(".art-upload-modal .art-upload-img").attr("src","");
}*/
if($(".art-upload-modal").length>0){
// $(".art-upload-modal .art-upload-img").attr("src","");
}
if(options.ok){
if($(".art-upload-modal .art-upload-sure").length>0){
$(".art-upload-modal .art-upload-sure").html(options.okTxt);
}
}else{
$(".art-upload-modal .art-upload-sure").hide();
}
if(options.cancel){
if($(".art-upload-modal .art-upload-cancel").length>0){
$(".art-upload-modal .art-upload-cancel").html(options.cancelTxt);
}
}else{
$(".art-upload-modal .art-upload-cancel").hide();
}
/*//iframe加载事件
if(options.okCall){
$(".art-upload-modal .art-upload-iframe").on("load",function(){
var jsonStr=$.trim($(window.frames["upload_iframe"].document.body).html());
var data=(new Function("return "+jsonStr))();
if(!data){
data={};
}
options.okCall(data);
$(".art-upload-modal").modal('hide');
});
}*/
}else{
var templateArr=['<div class="modal art-upload-modal">'];
templateArr.push('<div class="modal-dialog" >');
templateArr.push('<div class="modal-content">');
templateArr.push('<div class="modal-header">');
templateArr.push('<button type="button" class="close art-upload-close" data-dismiss="modal" aria-hidden="true">×</button>');
templateArr.push('<h4 class="modal-title">'+options.title+'</h4>');
templateArr.push('</div>');
templateArr.push('<div class="modal-body">');
templateArr.push('<div class="art-upload-img-box"></div>');
templateArr.push('<iframe name="art-upload-iframe" class="art-upload-iframe" width="100%" height="100%" frameborder="0" ></iframe>');
templateArr.push('<form name="art-upload-form" class="art-upload-form" method="post" action="'+(options.action+'?v=')+'" enctype="multipart/form-data" target="art-upload-iframe">');
templateArr.push('<div class="art-upload-box"><i class="fa fa-upload"></i></div>');
templateArr.push('<input type="file" name="file" class="art-upload-file"/>');
if(options.type){
templateArr.push('<input type="hidden" name="type" value="'+options.type+'"/>');
}
templateArr.push('</form>');
templateArr.push('</div>');
templateArr.push('<div class="modal-footer">');
if(options.cancel){
templateArr.push('<button type="button" class="btn btn-white art-upload-cancel" data-dismiss="modal">'+options.cancelTxt+'</button>');
}
if(options.ok){
templateArr.push('<button type="button" class="btn btn-default art-upload-sure">'+options.okTxt+'</button>');
}
templateArr.push('</div>');
templateArr.push('</div>');
templateArr.push('</div>');
templateArr.push('</div>');
$("body").append(templateArr.join(""));
//
}
if(options.preview){
$(".art-upload-modal .art-upload-file").change(function(){
showThumbailImage(this,$(".art-upload-img-box")[0]);
});
}else{
$(".art-upload-modal .art-upload-img").hide();
}
//关闭按钮
$(".art-upload-modal").on("click",".art-upload-close",function(){
$(".art-upload-modal").modal('hide');
});
//取消按钮
$(".art-upload-modal").on("click",".art-upload-cancel",function(){
$(".art-upload-modal").modal('hide');
});
//确认按钮
$(".art-upload-modal").on("click",".art-upload-sure",function(){
var $files=$(".art-upload-form .art-upload-file");
if($files.length>0&&$files.eq(0).val()==""){
Team777Dialog.toast("请选择上传的图片！");
return;
}
Team777Dialog.toast({msg:"<p>正在上传...</p>",close:false});
$("form[name='art-upload-form']").submit();
});
if(options.css){
$(".art-upload-modal .modal-dialog").css(css);
}
//iframe加载事件
if(options.okCall){
$(".art-upload-modal .art-upload-iframe").on("load",function(){
var jsonStr=$.trim($(window.frames["art-upload-iframe"].document.body).html());
if(!jsonStr){
return;
}
var data=(new Function("return "+jsonStr))();
if(!data){
data={};
}
setTimeout(function(){
options.okCall(data);
},2000);
Team777Dialog.closeToast();
$(".art-upload-modal").modal('hide');
});
}
/*$(".art-upload-modal").on('shown.bs.modal', function () {
// do something…
// alert("shown.bs.modal");
$(".art-upload-modal").modal('show');
});*/
$(".art-upload-modal").modal('show');
// $(".art-upload-modal").show();
}
function showThumbailImage(file,container){
try{
var pic = new Picture(file, container);
if(pic.isValid()){
pic.showImage();
}
}catch(e){
Team777Dialog.toast(e);
}
}
//缩略图类定义
function Picture(file, container){
var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
var ext;
var self = this;
if(typeof FileReader == "undified") {
throw "您老的浏览器不行了！";
}
if(file){
name = file.value;
}else{
throw '无效的文件';
}
this.ext = name.substr(name.lastIndexOf("."), name.length);
if(container.tagName.toLowerCase() != 'img'){
throw '不是一个有效的图片容器';
container.visibility = 'hidden';
}
container.style.visibility = 'visible';
this.showImage=function(){
showDataByURL(file.files[0],container);
};
this.isValid = function(){
if(allowExt.indexOf(self.ext) !== -1){
throw '不允许上传该文件类型';
return false;
}
return true;
}
}
function showDataByURL(resultFile,container) {
if (resultFile) {
var reader = new FileReader();
reader.readAsDataURL(resultFile);
reader.onload = function (e) {
var urlData = this.result;
$(container).html('<img class="art-upload-img" src="'+urlData+'">');
};
}
}
win["Team777Upload"]=Team777Upload;
/*function initEvent(){
var $upload_iframe=$("#upload_iframe");
$upload_iframe.bind("load",function(){
//$upload_iframe.unbind();
var jsonStr=$.trim($(window.frames["upload_iframe"].document.body).html());
var data=(new Function("return "+jsonStr))();
if(!data){
data={};
}
//data.imageName=$("#imgName").val();
// data.imageType=$("#imageType").val();
window.parent.putUploadImage(data);
});
// add uniform plugin styles to html elements
// $("input:checkbox, input:radio").uniform();
}
$(document).ready(function(){
initEvent();
});*/
})(window);
team777.upload.css
.art-upload-modal .art-upload-iframe{
display:none;
}
.art-upload-modal .art-upload-img-box{
width:50%;
margin:5px auto 20px;
}
.art-upload-modal .art-upload-img-box img{
width:100%;
}
.art-upload-modal .art-upload-form{
position: relative;
margin: 0 auto;
width: 200px;
}
.art-upload-modal i.fa-upload{
font-size: 80px;
line-height: 200px;
}
.art-upload-modal .art-upload-file{
opacity: 0;
height: 200px;
width: 200px;
}
.art-upload-modal .art-upload-box{
position: absolute;
top: 0;
text-align: center;
border: 1px dotted #58666e;
width: 200px;
height: 200px;
margin: 0 auto;
line-height: 223px;
border-radius: 20%;
}
使用：
$scope.lockManager.uploadImage=function(item){
Team777Upload.fileUpload({
title:"图片上传",
cover:false,//不显示背景
img:item.lockPhoto,//锁照片
action:ctx+"/japi/upload/uploadFileAndImage",
okCall:function(data){
var urls=data.url;
if(urls&&urls.length>0){
var url=urls[0];
// $("#img_box").attr("src",ctx+"/"+url);
$scope.safeApply(function(){
item.lockPhoto=url;
});
}
}
});
}
后台代码：springmvc
/**
* 文件上传(包括 图片)
*
* @param model
* @param file
* @return
* @throws IOException
*/
@RequestMapping("/uploadFileAndImage")
public @ResponseBody String uploadFileAndImage(@RequestParam MultipartFile[] file, Integer type) throws IOException
{
JSONObject json = new JSONObject();
if (null != file)
{
List<String> namelist = uploadFiles(file, "file", null, type);
json.put("url", namelist);
json.put("error", 0);
return json.toString();
}
json.put("error", 1);
return json.toString();
}
/**
* 多文件上传
*
* @param files
* @throws IOException
*/
protected List<String> uploadFiles(MultipartFile[] files, String fileType, Integer type) throws IOException
{
List<String> realNames = new ArrayList<String>();
for (MultipartFile multipartFile : files)
{
realNames.addAll(uploadFile(multipartFile, fileType, null, type));
}
return realNames;
}
/**
* 多文件上传
*
* @param files
* @throws IOException
*/
protected List<String> uploadFiles(MultipartFile[] files, String fileType, Map<String, Object> imgParamMap, Integer type) throws IOException
{
List<String> realNames = new ArrayList<String>();
for (MultipartFile multipartFile : files)
{
List<String> urlList = uploadFile(multipartFile, fileType, imgParamMap, type);
if (CollectionUtils.isNotEmpty(urlList))
{
realNames.addAll(urlList);
}
}
return realNames;
}
/**
* 单文件上传
*
* @param file
* @throws IOException
*/
protected List<String> uploadFile(MultipartFile file, String fileType, Map<String, Object> imgParamMap, Integer type) throws IOException
{
List<String> imagePathList = new ArrayList<>();
String fileName = file.getOriginalFilename();
String suffix = "";
String realName = "";
String fileUri = "";
// 如果有后缀
if (fileName.contains("."))
{
suffix = FileUtil.getSuffix(fileName);
}
else
{
suffix = fileName;
}
if (!file.isEmpty())
{
realName = StringUtil.getRandomString(3) + "_" + new Date().getTime() + suffix;
// 默认情况下为图片 上传
// 默认为图片
String dirPrefix = UrlConstant.imgUploadDir;
String urlPrefix = UrlConstant.imgUrl;
if (!"image".equals(fileType))
{
dirPrefix = UrlConstant.fileUploadDir;
urlPrefix = UrlConstant.fileUrl;
}
// 子文件夹
String subDir = null;
if (null != type)
{
subDir = ImageType.getName(type);
realName = ((subDir == null) ? "" : subDir.toLowerCase() + "/") + realName;
}
String fileName0 = dirPrefix + realName;
fileUri = urlPrefix + realName;
File file2 = new File(fileName0);
FileUtils.copyInputStreamToFile(file.getInputStream(), file2);
// 在基本的上传完图片后，如果有其它要操作的指令，从map中读取，比如缩放，比如加水印等
String wrapImageName = wrapImage(imgParamMap, file2);
if (wrapImageName != null)
{
wrapImageName = ((subDir == null) ? "" : subDir.toLowerCase() + "/") + wrapImageName;
}
boolean isWrapImageName = false;
if (StringUtil.isNotEmptyString(wrapImageName))
{
isWrapImageName = true;
}
wrapImageName = urlPrefix + wrapImageName;
if (isWrapImageName)
{
imagePathList.add(wrapImageName);
}
imagePathList.add(fileUri);
return imagePathList;
}
return null;
}