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 ...
随机推荐
- [sh]函数+条件表达式
了解了下shell的函数和case语句: 函数格式: function(){ } 例子: function rsyncstart() { if [ "${status1}X" == ...
- 【Android】12.5 利用Intent读取和更新通讯录
分类:C#.Android.VS2015: 创建日期:2016-02-23 修改日期:2016-03-08更正了未关闭cursor的bug. 一.简介 本节演示如何在安卓系统中通过用户配置文件(us ...
- 关于Solr6.0中solrj使用简单例子
solr6.0的solrJ接口有部分变化,下面列出了简单的使用实例,有需要的朋友可以参考下. package com.ailk.solr6; import java.io.IOException; i ...
- vue实现前端导出excel表格
1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...
- mysql root 密码忘记
首次安装mysql后,使用root登录mysql.终端会提示需要输入密码.可是安装的过程并没有提示输入root的密码.怎么办呢?通过修改my.conf配置绕开mysql的授权验证,重置root用户的密 ...
- pro mvvm 读书笔记
一.分离关注点 目的是确保每一个模块值有单一的,明确的目的,不需要去负责其他的功能.单一的目的也称为关注点. 1.1依赖 引用程序集对于依赖来说不是必须的.依赖关系可能也存在于一个代码单元要知道另一个 ...
- MongoDB学习之（二）java连接
上一章完了下mongodb的安装和IDE工具,现在开始使用java进行连接. 第一步:使用jar包, 这里需要三个包,具体为啥我也不清楚,反正因为报错,我就按照官方文档一个个的都下载了. 链接:htt ...
- Android集成银联支付，提示java.lang.UnsatisfieldLinkError错误
尽管解决方法很简单,但还是记录一下吧. 最近做银联支付(Android),官方给的demo是eclipse的.按照官方(https://open.unionpay.com/ajweb/product) ...
- CentOS 修改系统语言的方法
使用如下命令: export LANG="en_US.UTF-8" 可以修改环境变量LANG,修改之后立即生效,当时当系统重新启动时便会又变成原来的语言 另外两种修改语言的方法: ...
- 设计和开发ETL系统（二）——启动
在针对某个维度模型开始ETL系统设计之前,应当完成逻辑设计,草拟高层架构计划,并且为所有的数据元素拟定源到目标映射. ETL的设计过程十分重要: 收集所有的相关信息,包括事物处理系统中所允许的提取处理 ...