html js input fileupload,简单 js fileUpload控件
file_upload_demo.htmlhtml>
上传文件
$("a").simpleUploadFile({
changeCallback:function(file){
var fileReader = new FileReader();
fileReader.onload = function(){
$("img").attr("src",this.result);
};
fileReader.readAsDataURL(file);
}
});
simple_file_upload.js(function($){
var defaultSettings = {
acceptTypes:["jpg","png"], // 接受的上传文件类型
changeCallback:function(file){
} // 自定义input[type=file] change事件
};
var renderHtml = "";
// 添加隐藏的
function renderInputFile(target,settings){
// 生成dialog唯一标识
var id = "ys_simple_file_upload_"+new Date().getTime()+""+parseInt(Math.random());
$(target).attr("ys_simple_file_upload",id);
$(renderHtml).attr("id",id).appendTo("html"); // 添加到文档中去
return $("#"+id);
}
function bindEventHandlers(container,settings){
var changeCallback = settings.changeCallback;
$(container).change(function(e){
e.preventDefault();
e.stopPropagation();
var file = e.target.files[0];
if(!validateFileType(file,settings)){
alert("文件类型不正确!");
return;
}
changeCallback(file);
});
}
// 验证文件类型
function validateFileType(file,settings){
var acceptTypes = settings.acceptTypes;
var name = file.name;
var fileSuffix = name.substr(name.lastIndexOf(".")+1);
for(var i=0;i
var acceptType = acceptTypes[i];
if(acceptType==fileSuffix){
return true;
}
}
return false;
}
var options = {
simpleUploadFile:function(settings) {
var mergedSettings = {};
$.extend(mergedSettings,defaultSettings,settings);
var container = renderInputFile(this,mergedSettings);
bindEventHandlers(container,mergedSettings);
$(this).click(function(e){
e.preventDefault();
e.stopPropagation();
$(container).click();
});
}
};
$.fn.extend(options);
})(jQuery);
html js input fileupload,简单 js fileUpload控件相关推荐
- html页面美化代码时间,CSS+JS美化过漂亮的日历控件
CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...
- 15 ArcGIS JS API 4.17更改测量控件黄白相间的默认样式
问题描述 在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量 ...
- ASP.NET Web程序设计——FileUpload文件上传控件
FileUpload文件上传控件 主要功能:向指定的目录上传文件 控件包括:一个文本框 一个浏览按钮 属性 说明 HasFile 控件是否含有将要上传的文件 FileName 上传文件的文件名 Sav ...
- input绑定的jedate日期控件的值改变时触发事件问题
一.input绑定的jedate日期控件的值改变时触发事件问题 一般input中值发生改变,用onchange 就可以触发事件,但我现用jedate日期控,选中日期后,发现onchange无效. 后经 ...
- 【WPF】一个简单的ColorPicker控件
在斯克迪亚看到一篇WPF动态改变主题颜色的文章,来了兴趣,于是自己搞了个简单的ColorPicker控件. 控件其实很简单,定义了5个依赖属性 FinalBrushProperty, APropert ...
- 通过最简单的button控件,深入学习SAP UI5框架代码系列之零
Jerry曾经作为SAP成都研究院的Fiori应用开发人员,从事了将近3年的SAP CRM Fiori应用开发,在使用SAP UI5的过程中,遇到过形形色色的问题,不少都是通过调试SAP UI5框架代 ...
- html输入某天得到周几,HTML “input week年周”输入控件简介说明
摘要: 下文讲述html5中年周–输入控件的简介说明,如下所示: input type='week' 年周 输入控件简介说明 input type='week'功能: 当我们在文本域中使用type=' ...
- 如何在Android实现桌面清理内存简单Widget小控件
如何在Android实现桌面清理内存简单Widget小控件 我们经常会看到类似于360.金山手机卫士一类的软件会带一个widget小控件,显示在桌面上,上面会显示现有内存大小,然后会带一个按键功能来一 ...
- 【写笔记】WPF 自定义简单的TextBox控件
效果图: 笔记分享: https://www.yuque.com/docs/share/4aac743b-1ff0-42d2-9ec3-c605c145a58e?# <WPF 自定义简单的Tex ...
- html 实时年月日,HTML input date年月日日期输入控件简介说明
摘要: 下文讲述html5中年月日日期输入控件的简介说明,如下所示: input type='date' 年月日输入控件简介说明 input type='date'功能: 当我们在文本域中使用type ...
最新文章
- R语言绘制堆叠条形图
- Push Notification (1)Google C2DM 服务
- Swift Objective-C 访问级别控制
- Eclipse基础设置
- A5-1和DES两个加密算法的学习
- ArrayList clone()– ArrayList深拷贝和浅拷贝
- mysql执行计划查看_查看Mysql执行计划
- 阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配
- DPDK之KNI原理
- HTML+CSS+JS生日祝福网页在线制作(多种款式)
- 商业保理业务信息化平台建设的要点分享
- 华为星环大数据_华为和星环大数据平台关键能力对比(附报告)
- mysql blast2go_blast2go本地化教程
- Nginx解决无法代理域名问题
- “信息安全产品”的昨天、今天和明天
- java.io.FileNotFoundException: File does not exist: hdfs ://sxt/home/sqoop-1.4.6/lib/commons-codec-1
- gluster部署和使用
- 这5款微信小程序,实用又不占内存!
- 2022字节跳动数据仓库实习面经
- 蓝桥杯_横向打印二叉树