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

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

第一种方法：

//图片显示插件

(function ($) {

$.imageFileVisible = function (options) {

// 默认选项

var defaults = {

//包裹图片的元素

wrapSelector: null,

//元素

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

});

选择图1：		选择图2：

第二种方法：

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]);

}

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

js小学生图区_js实现图片区域可点击大小随意改变(适用移动端)代码实例
实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了. 在这里,我使用的js基于canvas写的一个小工具.可以圈出你需要点击的部分,然后生成一串 ...
js小学生图区_js 图片区域可点击，适配移动端，图片大小随意改变
实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了. 在这里,我使用的js基于canvas写的一个小工具.可以圈出你需要点击的部分,然后生成一串 ...
js小学生图区_多种方式实现js图片预览
js多种方式图片预览-持续更新 //设置自己的变量存储区 var Util = { file : $("#file"), image_show:$("#img_show& ...
js小学生图区_推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
解决导入markdown时本地图片无法显示问题——图床
解决导入markdown时本地图片无法显示问题--图床图床工具: PicGo 图片服务器:Gitee 辅助工具:Node.js 14.17.6 图床: 一般是指储存图片的服务器,有国内和国外之分.国 ...
py读取本地图片并返回图片给前端base64格式
py读取本地图片并返回图片给前端base64格式直接贴代码,有用请收藏 from fastapi import FastAPI from get90V import resBody, getRewr ...
JAVA读取本地图片并展示
代码如下: //读取本地图片输入流 FileInputStream inStream = new FileInputStream("D:/image/123.jpg");//byt ...
java读取本地图片及路径
手贱打算用java读取本地图片,发现各种问题,之前使用python,发现还是python太厉害如果打算用文件的形式读取图片,注意要对文件流做异常处理,还有java的输出语句,连接符之间的关系.最后成 ...
java访问本地文件_详解Java读取本地文件并显示在JSP文件中
详解Java读取本地文件并显示在JSP文件中当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相 ...

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

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

最新文章

热门文章