JS获取input[file]的值并显示在页面的实现方法


Posted in Javascript onMarch 09, 2018

实例如下所示:

$(document).on('change', '.photo-box .file', function () {
  //alert($(this).val());
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  var objUrl = getObjectURL(this.files[0]);
  console.log("objUrl = " + objUrl);
  var html = '<div class="photo-box"><img src="' + objUrl + '" alt=""><div class="photo-btn"><p>删除</p></div></div>';
  $(this).parent().parent().append(html);
})

以上这篇JS获取input[file]的值并显示在页面的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 #Javascript
vue.js获得当前元素的文字信息方法
Mar 09 #Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 #Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
在vue里面设置全局变量或数据的方法
Mar 09 #Javascript
vue2 全局变量的设置方法
Mar 09 #Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
JS 自动安装exe程序
2008/11/30 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python web框架中实现原生分页
2019/09/08 Python
python绘制规则网络图形实例
2019/12/09 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python 6种方法实现单例模式
2020/12/15 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Shell编程面试题
2012/05/30 面试题
数学系毕业生的自我评价
2014/01/10 职场文书
商务邀请函
2015/01/30 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
筑梦中国心得体会
2016/01/18 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js