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

傷城~ 2022-10-31 01:39 14阅读 0赞

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

第一种方法：

//图片显示插件

(function($) \{

$.imageFileVisible= function(options) \{//默认选项

vardefaults=\{//包裹图片的元素

wrapSelector:null,//元素

fileSelector:null,

width:'100%',

height:'auto',

errorMessage:"不是图片"\};//Extend our default options with those provided.

varopts=$.extend(defaults, options);

$(opts.fileSelector).on("change",function() \{varfile= this.files\[0\];varimageType= /image.\*/;if(file.type.match(imageType)) \{varreader= newFileReader();

reader.οnlοad= function() \{varimg= newImage();

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\});

\});

padding-top: 1px;">

选择图1：选择图2：

发表评论取消回复

表情：

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

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

相关阅读

相关 JS 页面显示图片

HTML页面 <div id="shopData" class="mini-datagrid" idField="id"

超、凢脫俗/ 2024年04月06日 14:52/ 0 赞/ 76 阅读

相关 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 赞/ 15 阅读

相关 js上传多张图片并显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

阳光穿透心脏的1/2处/ 2022年09月14日 08:42/ 0 赞/ 309 阅读

相关 js显示隐藏图片

1 ![20190213121435766.png][] 2 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

r囧r小猫/ 2022年03月20日 13:44/ 0 赞/ 400 阅读

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

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

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

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

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

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

相关 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 阅读