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控件相关推荐

  1. html页面美化代码时间,CSS+JS美化过漂亮的日历控件

    CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...

  2. 15 ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

    问题描述 在使用ArcGIS API for JavaScript 4.17开发项目时,有一个需求是需要在地图上添加距离测量和面积测量的控件,这其实很简单,直接调用ArcGIS JS API自带的测量 ...

  3. ASP.NET Web程序设计——FileUpload文件上传控件

    FileUpload文件上传控件 主要功能:向指定的目录上传文件 控件包括:一个文本框 一个浏览按钮 属性 说明 HasFile 控件是否含有将要上传的文件 FileName 上传文件的文件名 Sav ...

  4. input绑定的jedate日期控件的值改变时触发事件问题

    一.input绑定的jedate日期控件的值改变时触发事件问题 一般input中值发生改变,用onchange 就可以触发事件,但我现用jedate日期控,选中日期后,发现onchange无效. 后经 ...

  5. 【WPF】一个简单的ColorPicker控件

    在斯克迪亚看到一篇WPF动态改变主题颜色的文章,来了兴趣,于是自己搞了个简单的ColorPicker控件. 控件其实很简单,定义了5个依赖属性 FinalBrushProperty, APropert ...

  6. 通过最简单的button控件,深入学习SAP UI5框架代码系列之零

    Jerry曾经作为SAP成都研究院的Fiori应用开发人员,从事了将近3年的SAP CRM Fiori应用开发,在使用SAP UI5的过程中,遇到过形形色色的问题,不少都是通过调试SAP UI5框架代 ...

  7. html输入某天得到周几,HTML “input week年周”输入控件简介说明

    摘要: 下文讲述html5中年周–输入控件的简介说明,如下所示: input type='week' 年周 输入控件简介说明 input type='week'功能: 当我们在文本域中使用type=' ...

  8. 如何在Android实现桌面清理内存简单Widget小控件

    如何在Android实现桌面清理内存简单Widget小控件 我们经常会看到类似于360.金山手机卫士一类的软件会带一个widget小控件,显示在桌面上,上面会显示现有内存大小,然后会带一个按键功能来一 ...

  9. 【写笔记】WPF 自定义简单的TextBox控件

    效果图: 笔记分享: https://www.yuque.com/docs/share/4aac743b-1ff0-42d2-9ec3-c605c145a58e?# <WPF 自定义简单的Tex ...

  10. html 实时年月日,HTML input date年月日日期输入控件简介说明

    摘要: 下文讲述html5中年月日日期输入控件的简介说明,如下所示: input type='date' 年月日输入控件简介说明 input type='date'功能: 当我们在文本域中使用type ...

最新文章

  1. R语言绘制堆叠条形图
  2. Push Notification (1)Google C2DM 服务
  3. Swift Objective-C 访问级别控制
  4. Eclipse基础设置
  5. A5-1和DES两个加密算法的学习
  6. ArrayList clone()– ArrayList深拷贝和浅拷贝
  7. mysql执行计划查看_查看Mysql执行计划
  8. 阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配
  9. DPDK之KNI原理
  10. HTML+CSS+JS生日祝福网页在线制作(多种款式)
  11. 商业保理业务信息化平台建设的要点分享
  12. 华为星环大数据_华为和星环大数据平台关键能力对比(附报告)
  13. mysql blast2go_blast2go本地化教程
  14. Nginx解决无法代理域名问题
  15. “信息安全产品”的昨天、今天和明天
  16. java.io.FileNotFoundException: File does not exist: hdfs ://sxt/home/sqoop-1.4.6/lib/commons-codec-1
  17. gluster部署和使用
  18. 这5款微信小程序,实用又不占内存!
  19. 2022字节跳动数据仓库实习面经
  20. 蓝桥杯_横向打印二叉树

热门文章

  1. 免费下载IEEE、SCI论文的网站
  2. 16进制发送 mqtt客户端调试工具_MQTT调试工具
  3. nanohttpd文件服务器,NanoHttpd 轻量级的 HTTP 服务器
  4. STM32国产替代,再来一波
  5. python误差修正模型_如何用格兰杰检验、协整对数据进行分析_格兰杰因果检验...
  6. 支付宝H5支付,ISV权限不足
  7. 关于城市照明的大局观
  8. 运筹学教学|十分钟快速掌握割平面法及对偶单纯形法(附Java代码及算例)
  9. EAGLE转Protel文件
  10. 小 a 的强迫症题解