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 ...
随机推荐
- ToDictionary的用法
上次已经查过一次了,这次又忘了...看来有必要记录一下: linq查询结果经常ToList.ToArray什么的,但是ToDictionary用的比较少,导致经常忘记怎么用... ToDictiona ...
- Spring Hello World
1. 概述 Spring 框架是一个开源的 Java 平台,它最初是由 Rod Johnson 编写的,并且于 2003 年 6 月首次在 Apache 2.0 许可下发布. 1.1 依赖注入 1.2 ...
- Vmware-虚拟机中ubuntu不能联网问题的解决——NAT方式
设置虚拟机不能联网是很痛苦的,这里我就ubuntu的NAT上网问题就个人经验讲一下,其他的桥连接等没有使用就没有经验了. 1.查看/设置下NAT的网络 打开VMware Workstation, 点击 ...
- bazel-编译静态库
demo3 使用bazel编译静态库 demo3目录树 ├── README.md ├── static │ ├── BUILD │ ├── static.c │ └── static.h └── W ...
- Spark参数配置
转自:http://hadoop1989.com/2015/10/08/Spark-Configuration/ 一.Spark参数设置 二.查看Spark参数设置 三.Spark参数分类 四.Spa ...
- 孙鑫VC++视频教程笔记
写在前面的话:在学习孙鑫老师的VC++视频时,为了加深自己对知识的深入理解,就做了下面的笔记. 第一讲: 第二讲: 第三讲: 第四讲: 第五讲: 第六讲: 第七讲: 第八讲: 第九讲: 第十讲: 第十 ...
- LeetCode: Sort List 解题报告
Sort List Sort a linked list in O(n log n) time using constant space complexity. 使用Merge Sort, 空间复杂度 ...
- Jbpm4.4 使用
最近工作项目中需要用到工作流.于是找到了jbpm.关于jbpm的一些概念就不说了 1) 首先下载jbpm,这里我选择了jbpm4.4 从官网上可以下载 http://sourceforge.net/ ...
- 用JS的正则表达式如何判断输入框内为中文或者是英文
1.只能输入数字和英文的: <input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clip ...
- SQL Server 2008 压缩日志
USE [master]GOALTER DATABASE DNName SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE DNName SET RECO ...