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;
}
相关推荐
随着HTML5技术的发展，文件上传功能得到了显著提升，不再局限于简单的单文件上传，而是支持多文件选择、文件预览、进度显示等功能，极大地提升了用户体验。 HuploadifyV2.0-master 是一个具体的HTML5文件上传插件...
**Ajax异步上传文件插件详解** 在现代Web开发中，用户交互的实时性和流畅性是提升用户体验的关键因素之一。Ajax（Asynchronous JavaScript and XML）技术的出现，使得页面无需刷新即可实现数据的异步更新，极大地...
总之，这款PHP文件上传插件为开发者提供了一个便捷且安全的工具，使文件上传功能的实现变得更加简单。理解并掌握上述知识点，你就能充分利用这款插件，为你的项目添加高效、可靠的文件上传功能。
本文将深入探讨“jQuery选择或拖拽批量上传文件插件”，这款插件为用户提供了方便快捷的文件上传体验，尤其适用于图片上传。 首先，我们要理解jQuery的选择器功能。jQuery选择器是其强大之处，它允许开发者通过简单...
Uploadify是一款流行的多文件上传插件，它允许用户在网页上批量上传文件，同时具有良好的浏览器兼容性。这个插件对于那些需要在网站上实现高效、便捷文件上传功能的开发者来说，是一个非常实用的工具。在本文中，...
PupLoadDemo可能是一个简单的多文件上传示例项目，它可能包含以下几个关键部分： 1. HTML页面：包含一个多文件上传的表单，使用HTML5的`<input type="file" multiple />`元素。 2. JavaScript脚本：使用jQuery或者...
Bootstrap样式文件上传jQuery插件是前端开发者在构建交互式网页时常常使用的工具，尤其是对于需要用户上传文件的场景。这款插件，名为bootstrap-filestyle，是专门为Bootstrap框架设计的，目的是提升文件输入框的...
这个“简单实用的异步上传文件及图片插件”显然是为了满足这种需求而设计的，并且提供了demo，方便开发者快速理解和使用。 异步上传的核心技术主要基于Ajax（Asynchronous JavaScript and XML），这是一种创建动态...
jQuery文件上传插件则通过Ajax技术扩展了这个功能，允许异步上传，即在后台上传文件，而不影响页面的其他操作。此外，这些插件通常支持批量上传、文件类型验证和大小限制，以提高安全性和性能。 在ASP.NET框架中，...
jsp使用uploadify插件实现文件上传的示例，测试时将uploadify 直接导入myeclipse就能用了。 uploadify是一个与jquery和flash结合实现的上传程序，界面挺漂亮，用起来也方便，不过浏览器需要安装有Flash插件，好像...
.NET JS WSFUpload是一款高效的文件上传插件，它结合了JavaScript（js）和ASP.NET的技术，提供了一种简单而快速的文件上传解决方案。本文将详细介绍该插件的使用方法、工作原理以及如何结合ASP前台代码和一般处理...
使用了本控件后，在后台编写代码时，不必编写实时监控文件上传进度的复杂代码，只用编写简单的处理保存上传文件的代码即可，因为FLASH插件会自动帮助算出上传进度，并实时定时给控件提供进度显示数据，这样就减轻了...
这款插件具有优秀的用户体验设计，能够处理多文件选择、预览、断点续传等功能，使得文件上传变得更加简单和直观。 在WebUploader的设计中，它采用了HTML5的File API，这使得它能够在现代浏览器中支持大文件的分块...
ASP文件上传组件是一种在Web应用中处理用户上传文件的关键技术，尤其对于动态网站而言，它允许用户方便地将数据文件（如文档、图片、音频、视频等）上传至服务器。在本例中，"AN-Upload"是这样一个组件，它采用ASP...
因此，应限制单个文件大小，设置上传时间限制，并对上传文件进行安全检查，如检查文件类型和内容。 9. 错误处理与用户体验：提供友好的错误提示，如文件类型不支持、文件过大、网络中断等，以提高用户体验。 通过...
例如，可以设置最大上传文件大小、允许的文件类型，或者添加自定义的验证逻辑。 6. **多文件上传**：此插件支持同时上传多个文件，这对于处理大量数据的场景非常有用。多文件上传功能通常通过HTML5的`...
主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下
3. 安全性：验证上传文件类型，防止恶意文件（如脚本、病毒）上传。可以通过检查文件扩展名来实现。 4. 处理多文件上传：ASP.NET MVC提供多文件上传支持，可以使用多个FileUpload控件或Html5的FormData对象。 在...
它提供了用户友好的界面，使得在Web浏览器上进行多文件上传变得简单且高效。该插件支持显示上传进度，确保用户能够实时了解文件传输状态，提升用户体验。此外，Plupload还具备图像自动缩略功能，可以在上传过程中...