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 ...
随机推荐
- mybatis 一二事（3） - 多表关联查询
db.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/order jdbc.user ...
- [k8s]如何处理dockerfile无expose情况下在k8s里暴漏访问
做镜像时候忘记expose端口了, 或者要做一个通用的镜像, expose端口不固定, 又要在k8s环境里跑并暴漏服务访问,怎么破? 实际上: yaml的 ports: - containerPort ...
- 2>/dev/null
2>/dev/null是如果你的命今出错的话,错误报告直接输出到黑洞里不会显示在屏幕上. ls -al 1>list.txt 2>list.err #将显示的数据,正确的输出到lis ...
- JNI中GetStringChars函数中的isCopy
一直不明白这个isCopy是什么意思,只知道每次使用的时候都传NULL,今天看到了相关的资料,特来分享下. 当从JNI函数GetStringChars中返回得到字符串B时,如果B是原始字符串java. ...
- 如何使用Redis做MySQL的缓存
应用Redis实现数据的读写,同时利用队列处理器定时将数据写入mysql. 同时要注意避免冲突,在redis启动时去mysql读取所有表键值存入redis中,往redis写数据时,对redis主键自增 ...
- feignclient设置hystrix参数
序 feign默认集成了hystrix,那么问题来了,如何像hystrix command那样设置每个方法的hystrix属性呢. 实例 @FeignClient("product" ...
- C++面向对象程序设计的一些知识点（5）
摘要:运算符能给程序员提供一种书写数学公式的感觉,本质上运算符也是一种函数,因此有类内部运算符和全局运算符之分,通过重载,运算符的“动作”更加有针对性,编写代码更像写英文文章. 1.C++标准允许将运 ...
- 章鱼哥出品—VB.NET DataGridView绑定数据源 "与货币管理器的位置关联的行不能设置为不可见" 问题的解决
DtaGridView绑定数据源后.假设想让数据条件显示的话,直接使用 My_Row.Visible = False就会出错.错误类型是 "与货币管理器的位置关联的行不能设置为不可见&qu ...
- C语言 · 简单加法
算法提高 简单加法 时间限制:1.0s 内存限制:256.0MB 问题描述 小于10的自然数中有四个数字能除尽3或5(3, 5, 6, 9),它们的和为23. 请计算所有小于1000 ...
- http://blog.csdn.net/ce123_zhouwei/article/details/7364294
http://blog.csdn.net/ce123_zhouwei/article/details/7364294