jquery.attach附件上传jquery插件
html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
......
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="attach/jquery.attach.js"></script>
<script type="text/javascript" src="attach/index.js"></script>
......
<script type="text/javascript">
$(function(){
initFileInput('fileuri','yulanimg');
});
</script>
</head>
<body>
<div>
<div class="uploadstyle">
<label for="doc-ta-1" style="padding-right: 10px;">上传图片</label>
<input id="inputupload" class="am-form-field am-input-sm" type="file" style="padding-top: 10px;padding-bottom: 10px;"/>
<span id="continuefile">
</span>
</div>
<div id="yulanimg"></div>
<span style="display:none;" id="fileuri"></span>
</div>
</body>
</html>
css
.uploadstyle {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent:;
line-height: 20px;
}
.uploadstyle input {
position: absolute;
font-size: 100px;
right:;
top:;
opacity:;
}
index.js
//初始化fileinput控件
function initFileInput(fileuri,yulanimg) {
$(":input[type='file']").attachsvr({
script: urlcore + "/file/upload/batch",
uploadkey:"files",
filetype:[".jpg",".png",".jpeg",".bmp"], onComplete:function(json){
var data = JSON.parse(json.data);
if (data.success == true) {
//$("#"+divUploadWrap).css("background-image","");
//$("#"+fileuri).text('');
//i表示在data中的索引位置，n表示包含的信息的对象
//$("#"+yulanimg).html('');
var filespanval = $("#"+fileuri).text();
$.each(data.data,function(i,n){
$("#"+yulanimg).append('<img id="fileimgid" style="width: 250px;height: 250px;padding-left: 5px;padding-bottom: 5px;" src="'+n+'">');
if (filespanval != undefined && filespanval != null && filespanval != '') {
$("#"+fileuri).text(filespanval+"|||"+n);
}else{
$("#"+fileuri).text(n);
}
});
}else{
alert("上传失败");
} },
onProgress:function(xhr){
//console.log(xhr);
//console.log("progress,在这里可以添加loading 效果",parseInt(xhr.loaded/xhr.total*100)+"%")
$('#continuefile').text(parseInt(xhr.loaded/xhr.total*100)+"%");
},
onCheck:function(file){
console.log(file);
return true;
},
onError:function(e){console.log("error",e)},
ctxdata:{
"参数1":"参数1的值",
"参数2":"参数2",
} });
}
jquery.attach.js
/*
*@author 271151388@qq.com
*个人主页 http://www.imwinlion.com/
*专门为技术人员创业提供从工具到思维层面的支持的网站
*基本使用 https://my.oschina.net/u/2558718/blog/743780
*/
!~(function(w,d,$){
var _attachsvr={};
var defaultoptions={
debug:false,
onCheck:function(file){return true;},
onComplete:function(json){},
onError:function(r){},
onProgress:function(xhr){},
ctxdata:{},
script:"",
uploadkey:"files",
filetype:[".jpg",".png",".jpeg",".zip",".mp3",".mp4"]
}
_attachsvr.doupload=function(file,optios){
var options = $.extend(defaultoptions,optios);
var data = new FormData();
for(var i in options.ctxdata){
data.append(i,options.ctxdata[i]);
}
data.append(options["uploadkey"], file[0].files[0]);
var surport = false;
var filename = file[0].files[0].name;
for(var i in options.filetype){ if(filename.indexOf(options.filetype[i])>-1){
surport = true;
}
}
if(surport==false){
options.onError({"result":"notsurport","msg":"这个文件类型不支持","data":{}})
return false;
}
if(!options.onCheck(file)){
return false;
}
$.ajax({
url: options.script,
type: 'POST',
data: data,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('progress', function(xhr){
options.onProgress(xhr);
}, false);
return xhr;//一定要返回，不然jQ没有XHR对象用了
},
processData: false,
contentType: false,
error:function(XMLHttpRequest, textStatus, errorThrown){
options.onError(
{
"result":"errornet",
"msg":"网络通讯错误",
"data":{"XMLHttpRequest":XMLHttpRequest,"textStatus":textStatus,"errorThrown":errorThrown}
}
);
}
}).done(function(ret){
options.onComplete({"result":"success","msg":"文件已经上传成功","data":ret});
});
};
w.attachsvr = _attachsvr;
$.fn.extend({
//插件名称 - paddingList
attachsvr: function (options) {
var defaults = defaultoptions;
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
var obj = $(this);
$(this).unbind().change(function(){
_attachsvr.doupload(obj,o);});
}); }
});
})(window,document,jQuery)
注： 如果上传之后的预览图需要调整大小和只允许上传一张图片，可以如下设置：
initFileInput('fileuri','yulanimg');
var wait = setInterval(function(){
var fileimgid = $("#fileimgid")[0];
//判断select option是否为空
if (fileimgid != 0 && fileimgid != null && fileimgid != undefined && fileimgid != '') {
clearInterval(wait);
//自定义图片上传预览的大小
$("#fileimgid").css("width","30px");
$("#fileimgid").css("height","30px");
$("#fileimgid").css("padding-left","");
$("#fileimgid").css("padding-bottom","");
$(".uploadstyle").css("background","#e2e2e2");
}
},100);
var wait1 = setInterval(function(){
var fileimgid = $("#yulanimg").html();
//判断select option是否为空
if (fileimgid != 0 && fileimgid != null && fileimgid != undefined && fileimgid != '') {
clearInterval(wait1);
$("#inputupload").attr("disabled",true);
}
},100);
jquery.attach附件上传jquery插件的更多相关文章
- jQuery多图上传Uploadify插件使用及传参详解
因为工作需要,这两天接触到了Uploadify插件,由于是第一次用,花了我近一天的时间.下面我把我在用这个插件过程详细的分享出来,也让自己巩固一下,也希望能帮助到你. 所需文件: jquery-1.8 ...
- jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change
jQuery的ajaxFileUpload插件 关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传,用live()方法来绑定 file表单 的change事件就能够解决,直接$( ...
- 赞！带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- 带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...
- jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件
借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...
- 图片上传jQuery插件（兼容IE8）
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload. ...
- jquery uploadify文件上传插件用法精析
jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...
- jQuery OCUpload ——> 一键上传插件
OCUpload为jQuery的插件(One Click Upload),意思为一键上传,封装了对于文件上传的一些方法,只需几行代码,文件上传优雅而简洁. 对于传统的文件上传,只是通过inp ...
随机推荐
- [na]pc加入域认证细节
这也是以前好奇,因为学生时候,经常机房上网, 对一些譬如.. 现在看来很low了. 是小作坊式的技术, 真正上不了台面的.扛不住生产的压力. ftp共享 计算机统一管理等 无盘/网克等特别好奇 计算机 ...
- UVA10519 - !! Really Strange !!(数论+高精度)
10519 - !! Really Strange !!(数论+高精度) option=com_onlinejudge&Itemid=8&category=24&page=sh ...
- ThinkPad 预装win8换win7(软激活)
今天晚上有人叫我给他装系统,没错!这就是计算机专业的拿手技能(维修学院重装系统专业Win7系统班^-^). 一拿手上,是lenovo的ThinkPad E430型号,预装的系统是win8,由于win8 ...
- Ubuntu12.04下apache服务器的安装也配置
安装步骤 1.下载httpd http://httpd.apache.org/ 2.解压缩httpd tar vxzf httpd-2.4.6.tar.gz 3.安装httpd 进入解压缩后的目录 c ...
- VC++ 获取本地IP和计算机名
主要是两个函数的使用,gethostname();.gethostbyname(); 自定义两个函数GetLocalHostName获取计算机名.GetIPAddress获取IP地址 int CIPD ...
- js异步加载的解决方案
默认情况javascript是同步加载的,javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实 ...
- java 监听器实现原理
实例二: @Override public void onStart(Intent intent, int startid) { super.onStart(intent, startid); l ...
- activemq5.11整合spring4.2.3
前言 这篇博客记录 activemq5.11整合spring4.2.3的过程,免得以后忘记了 1.工程结构 2.pom.xml <project xmlns="http://maven ...
- 【C#/WPF】获取项目的根目录（Root Directory）
/// <summary> /// 获得项目的根路径 /// </summary> /// <returns></returns> public str ...
- 在WMware新建一个虚拟机