当前位置:主页 > jquery教程 > jQuery实现的上传图片本地预览效果简单示例

jQuery上传图片本地预览效果实例讲解

发布:2019-12-17 16:41:55 138


给网友朋友们带来一篇jQuery上传图片相关的编程文章,网友徐飞光根据主题投稿了本篇教程内容,涉及到jQuery、上传图片、本地预览、jQuery实现的上传图片本地预览效果简单示例相关内容,已被846网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

jQuery实现的上传图片本地预览效果简单示例

本文实例讲述了jQuery实现的上传图片本地预览效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById('upload').files[0]);
  var f = document.getElementById('upload').files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById('preview').src = src
})
</script>
</body>
</html>

运行效果:

jQuery实现的上传图片本地预览效果简单示例

jQuery实现的上传图片本地预览效果简单示例

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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


参考资料

相关文章

  • jQuery实现点击旋转再点击恢复的实例代码

    发布:2019-11-05

    这篇文章主要介绍了jQuery实现点击旋转,再点击恢复初始状态动画效果,结合实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下


  • java上传图片文件功能实现方法

    发布:2020-01-11

    这篇文章主要教大家如何简单实现java上传图片文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 实例分析JQueryiframe页面操作父页面中的元素与方法

    发布:2020-02-27

    这篇文章主要是对JQueryiframe页面操作父页面中的元素与方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助


  • jQuery图片切换插件jquery.cycle.js实例效果

    发布:2020-02-10

    Cycle供了非常好的功能来帮助大家更简单的使用插件的幻灯功能,下面是它的一个非常不错的示例,大家可以学习下


  • 总结python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法

    发布:2020-02-09

    下面小编就为大家带来一篇python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • jQuery构造函数init参数知识点总结

    发布:2019-11-23

    其实楼主的F和jQuery.fn.init是相等的; 实现功能是和jq一样的, 只是jq的把构造函数放进原型;如果非要说原因,个人理解jq这样写整体结构清晰,先是入口构造函数,紧跟着是原型部分(原型里面init是初


  • 全面解析jQuery无冲突模式

    发布:2020-01-19

    在本篇文章里小编给大家分享了关于jQuery无冲突模式知识点分析内容,需要的朋友们可以学习下。


  • jQuery Mobile 窗体长内容的缺陷与解决方法

    发布:2020-05-08

    这篇文章主要介绍了jQueryMobile之窗体长内容的缺陷与解决方法,结合具体实例形式分析了jQueryMobile底部悬浮层遮挡情况下的解决方法,非常简单实用,需要的朋友可以参考下


网友讨论