简单的做一个图片上传预览(web前端)

简介: 简单的做一个图片上传预览(web前端)

在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理。

效果预览:

代码:

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML5上传图片预览</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>  
</head>  
<body>  
<h3>请选择图片文件:JPG/GIF</h3>  
<form name="form0" id="form0">  
<input type="file" name="file0" id="file0" multiple="multiple" /><br>  
    <img src="" id="img0" style="width: 20rem;height: 15rem;">
</form>  
<script>   
$("#file0").change(function(){  
     var objUrl = getObjectURL(this.files[0]) ;//获取文件信息  
     console.log("objUrl = "+objUrl);  
      if (objUrl) {  
      $("#img0").attr("src", objUrl);  
     }   
}) ;  
function getObjectURL(file) {  
     var url = null;   
     if (window.createObjectURL!=undefined) {  
      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 ;  
    }  
    </script>  
</body>  
</html>  

相关文章
|
5天前
|
缓存 前端开发 JavaScript
现代Web开发中的前端性能优化策略
在当今快节奏的Web开发环境中,前端性能优化至关重要。本文探讨了一些实用的策略和技术,帮助开发人员提升网页加载速度和用户体验。
|
19天前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
25天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
15 1
|
5天前
|
前端开发 JavaScript 数据管理
现代Web开发中的前端框架选择指南
选择合适的前端框架是现代Web开发中的关键决策之一。本文探讨了几种流行的前端框架,比较它们的特点和适用场景,帮助开发者在众多选项中做出理性的选择。
|
5天前
|
缓存 前端开发 JavaScript
现代Web开发中的前端性能优化策略
在当今快节奏的Web开发环境中,前端性能优化是确保用户体验和网站成功的关键。本文探讨了一些实用的前端性能优化策略,涵盖了从代码优化到资源加载的各个方面,帮助开发者有效提升网页加载速度和响应性能。
|
7天前
|
编解码 前端开发 JavaScript
现代Web开发中的前端技术趋势与挑战
随着互联网的迅猛发展,现代Web开发中前端技术正日益成为关注的焦点。本文探讨了当前前端技术的主要趋势和面临的挑战,从性能优化到跨平台适配,为开发者提供了深入的洞见和解决方案。
|
22天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
30 0
|
25天前
|
XML 前端开发 JavaScript
前端概论 web
前端概论 web
19 0
|
27天前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
29天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。