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

阳光穿透心脏的1/2处 2021-09-26 22:50 503阅读 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 条评论，503人围观）

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

相关阅读

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

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

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

相关 js图片上传并显示

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

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

相关 js小学生图区_js读取本地图片并显示

版权声明：本文为博主原创文章，未经博主允许不得转载。根据项目需要，需要选择本地图片并显示在页面上，然后上传至服务器。因为自身刚刚接触js,所以比较生疏，碰到问题吼，幸好有强

傷城~/ 2022年10月31日 01:39/ 0 赞/ 14 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 PyQt5 读取显示本地图片

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

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

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

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

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