库房--js读取本地图片并显示

阳光穿透心脏的1/2处 2021-09-26 22:50 486阅读 0赞

转载文章地址：[http://blog.csdn.net/qiulei\_21/article/details/52785191][http_blog.csdn.net_qiulei_21_article_details_52785191]

> 根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身还没有正式的学习过js,所以比较生疏，碰到问题就立马百度，幸好有强大的网络，搜索很多有用的资源，现在将在网上看到的有关js读取本地图片并显示的代码总结一下，供大家使用，并给自己一个记录。

*  第一种方法：

<script type="text/javascript"> //图片显示插件 (function ($) { $.imageFileVisible = function (options) { // 默认选项 var defaults = { //包裹图片的元素 wrapSelector: null, //<input type=file />元素 fileSelector: null, width: '100%', height: 'auto', errorMessage: "不是图片" }; // Extend our default options with those provided. var opts = $.extend(defaults, options); $(opts.fileSelector).on("change", function () { var file = this.files[0]; var imageType = /image.*/; if (file.type.match(imageType)) { var reader = new FileReader(); reader.onload = function () { var img = new Image(); img.src = reader.result; $(img).width(opts.width); $(img).height(opts.height); $(opts.wrapSelector).append(img); }; reader.readAsDataURL(file); } else { alert(opts.errorMessage); } }); }; })(jQuery); $(document).ready(function () { //图片显示插件 $.imageFileVisible({ wrapSelector: "#image-wrap1", fileSelector: "#file1", width: 300, height: 300 }); $.imageFileVisible({ wrapSelector: "#image-wrap2", fileSelector: "#file2", width: 300, height: 300 }); }); </script>
     <div id="ImportHead">
            <table border="0" class="frm" style="height: 35px; width: auto; padding-left: 5px; padding-top: 1px;">
                <tr style="width: 300px; height: 400px;">
                    <th>
                        选择图1：
                    </th>
                    <td>
                        <input type="file" id="file1">
                        <div id="image-wrap1" style="width: 300px; height: 300px; border: solid 1px lightGray">
                        </div>
                    </td>
                    <th>
                        选择图2：
                    </th>
                    <td style="width: 300px;">
                        <input type="file" id="file2">
                        <div id="image-wrap2" style="width: 300px; height: 300px; border: solid 1px lightGray">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: right">
                        <input type="submit" id="btnUpload" class="btnSearch" value="上传" />
                    </td>
                </tr>
            </table>
        </div>

*  第二种方法：

<html>
    <body>
     <img id="image" src="地址"/>
    <br/>
     <input type="file"onchange="selectImage(this);"/>
    <br/>
    <script> var image = ''; function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('image').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } </script>
    </body>
    </html>

[http_blog.csdn.net_qiulei_21_article_details_52785191]: http://blog.csdn.net/qiulei_21/article/details/52785191

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关 electron 从剪贴板读取图片并显示

以下示例代码基于vue 首先，我们在data中定义几个变量 data() { return { showclipboa

柔光的暖阳◎/ 2023年01月07日 14:25/ 0 赞/ 355 阅读

相关 js图片上传并显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

淩亂°似流年/ 2022年12月13日 01:42/ 0 赞/ 229 阅读

相关 Android--从本地相册获取图片并显示

Android--从本地相册获取图片并显示很多博客讲这部分内容会和其他的混在一起讲，看起来会比较费劲，为了更方便的调用，特意写了如何从本地获取图片以及显示这部分代码。

短命女/ 2022年05月15日 08:23/ 0 赞/ 684 阅读

相关 Qt--打开文件对话框读取图片并显示读取路径

1、准备工作：首先，在ui界面文件上添加如下控件：两个label、一个LineEdit、一个pushButton ![在这里插入图片描述][watermark_type

清疚/ 2022年01月29日 05:15/ 0 赞/ 1174 阅读

相关 Html读取本地文件夹下图片并显示的示例代码

一目的在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。技术分析：存在问题 Html中file标签获取到的路径时相对的。

Myth丶恋晨/ 2021年11月15日 13:50/ 0 赞/ 640 阅读

相关读取并显示mysql中的BLOB图片

项目需要将存入mysql数据库中的图片显示出来，Controller中方法如下： @RequestMapping(value="/showPicture.do",me

r囧r小猫/ 2021年10月13日 00:39/ 0 赞/ 417 阅读

相关库房--js读取本地图片并显示

转载文章地址：[http://blog.csdn.net/qiulei\_21/article/details/52785191][http_blog.csdn.net_qiu

阳光穿透心脏的1/2处/ 2021年09月26日 22:50/ 0 赞/ 487 阅读

相关 JS 粘贴展示图片并读取图片

主要是通过给div绑定粘贴事件 div.addEventListener('paste', function(){ }) 粘贴事件核心代码 (最

秒速五厘米/ 2021年09月21日 00:32/ 0 赞/ 436 阅读

相关 PyQt5 读取显示本地图片

-- coding: utf-8 -- import sys from PyQt5 import QtWidgets,QtCore,QtGu

港控/mmm°/ 2021年07月27日 02:06/ 0 赞/ 508 阅读

相关 node.js读取HTML并显示文件中的图片

node.js读取HTML并显示文件中的图片 index.html <!DOCTYPE html> <html lang="en">

谁践踏了优雅/ 2021年07月25日 14:17/ 0 赞/ 617 阅读