• 技术文章 >web前端 >js教程

    js实现图片上传并正常显示_javascript技巧

    2016-05-16 15:24:33原创803
    项目经常会用到头像上传,那么怎么实现呢?

    首先是HTML布局:

    
    

    jquery方式,IE不支持,但IE会获得绝对的上传路径信息:

    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 ;
    }
    
    $('#thumbnail').change(function() {
     var eImg = $('');
     eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input
     $(this).after(eImg);});
    
    

    网上找一份可用的代码非常不易,经过不断的筛选总结才得出兼容所有的文件上传显示
    HTML布局

    JS代码:

    
    
    

    希望本文所述对大家学习javascript程序设计有所帮助。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js 图片上传
    上一篇:基于JavaScript实现动态创建表格和增加表格行数_javascript技巧 下一篇:原生js页面滚动延迟加载图片_javascript技巧
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• js实现图片跟随鼠标移动的两种方法• 一文详解js中的事件对象、事件源对象和事件流• 实例讲解js如何实现dom元素横向及纵向滚动的动画• js实现模拟鼠标拖拽事件(附图文实例)• 实例介绍javaScript操作字符串的一些常用方法
    1/1

    PHP中文网