读取input:file的路径并显示本地的图片

前端图片压缩上传和显示 watch: 观测Vue实例上的数据变动,对应一个对象, 键:就是需要监测的那个东西, 值: 1.可以是当键变化时执行的函数,有两个参数,第一个是变化前的值,第二个是变化后的值。 2.可以是函数名,得用单引号包裹。 3.可以是一个对象,这个对象有三个选项: (1)handler :一个回调函数,监听到变化时应该执行的函数。 (2)deep :boolean值, 阅读详情

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
    if (window.FileReader) {
        var    oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        oFReader.onload = function (oFREvent) {
            if (!oPreviewImg) {
                var newPreview = document.getElementById("imagePreview");
                oPreviewImg = new Image();
                oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
                oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
                newPreview.appendChild(oPreviewImg);
            }
            oPreviewImg.src = oFREvent.target.result;
        };

        return function () {
            var aFiles = document.getElementById("imageInput").files;
            if (aFiles.length === 0) { return; }
            if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
            oFReader.readAsDataURL(aFiles[0]);
        }

    }
    if (navigator.appName === "Microsoft Internet Explorer") {
        return function () {
            alert(document.getElementById("imageInput").value);
            document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;

        }
    }
})();
</script>
<style type="text/css">
#imagePreview {
    width: 160px;
    height: 120px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
</head>

<body>

    <div id="imagePreview">
    </div>

    <form name="uploadForm">
        <p>
        <input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />

        <input type="submit" value="Send" /></p>
    </form>
</body>

</html>


但是需要注意的是 在IE8中 由于IE8自作聪明的将真实路径隐藏起来了 用alert打印的结果是C:/fakepath/*.jpg 所以导致该方法无法使用

解决办法是:进入工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可。

读取input:file的路径并显示本地图片的方法 input:file是一个文件上传控件,如何读取input:file的路径并显示图片,具体实现如下,需要注意的是在IE8中由于IE8自作聪明的将真实路径隐藏起来 立即下载

相关推荐

VSCode初级使用教程详细版

Visual Studio Code(简称VSCode)是一款轻量级但功能强大的代码编辑器,支持多种编程语言,具有丰富的扩展插件,并内置了Git版本控制。VSCode工具满足绝大多数工作场景,使用场景包括不限于大学生作业代码编写、读研期间实验脚本编写、工作中项目代码编写与协作、数学建模竞赛中代码编写等。本文将从VSCode的安装开始,逐步介绍其基本使用方法和一些高级功能,帮助读者快速上手。

qq_37360300的博客 5万+

input type=file 获取选择文件名称、路径方法及input上传按钮美化

input type=file 获取选中文件名称、路径方法及input上传按钮美化

Sun_blog 1万+

Ubuntu配置Qt Creator树莓派交叉编译环境一步到位

本文详细指导在Ubuntu系统上配置Qt Creator树莓派交叉编译环境。从工具链安装、sysroot创建到Qt库编译,逐步讲解如何搭建完整的ARMv7交叉编译工具链,实现高效开发树莓派应用。

1282

html之input如何通过拖放得到文件路径

按照其他博文提到,目前在学习go中,想通过golang+lorca写一个基于chrome的exe,来实现N多自动化操作。为啥不用QT呢,别问,问就是因为我想学习新东西,哈哈。 好的,正文来了,本地的exe经常会有拖动文件路径的需求 我想通过以下的代码来实现我的拖拽需求 H5代码 这里是一个输入框 <div class="bgDiv"> <label for="project_type" style="float:left">HAHA: </label>

qq_41898367的博客 1806

华为海思IC设计岗位笔试全解析:物理、电路与工艺三大方向备考指南

本文全面解析华为海思IC设计岗位笔试的物理、电路与工艺三大方向备考要点。针对物理设计方向,重点讲解半导体能带理论、载流子输运机制等核心考点;电路设计方向涵盖Verilog语法、UVM验证等关键技术;工艺方向则深入探讨FinFET工艺、光刻技术等前沿知识。提供高效备考策略和应试技巧,助力考生提升通过率。

weixin_29196613的博客 1088

Python Selenium自动化浏览器实战:从环境搭建到高级技巧

浏览器自动化是现代软件开发与数据处理中的关键技术,它通过程序模拟用户操作,实现网页交互的自动化执行。其核心原理是基于WebDriver协议,通过驱动程序与浏览器进行通信,从而控制浏览器的各种行为。这项技术的价值在于能够将重复性高、耗时长的Web操作转化为可编程、可复用的脚本,极大提升工作效率和准确性。在应用场景上,它广泛覆盖了Web自动化测试、数据采集与爬虫、日常办公流程自动化以及RPA(机器人流程自动化)等多个领域。本文聚焦于Python环境下Selenium这一经典工具,深入讲解其环境配置、八大元素定位

anwenzhao0749的博客 446

input file如何获取选择图片的本地路径和base64路径

本地路径myHeadFile: function (e) { // 这里是input file 的onchange事件 const file = e.srcElement.files[0] const imgURL = window.URL.createObjectURL(file) // imgURL就是你的图片的本地路径,两部就能解决问题 }base64 ...

sk12138的博客 1万+

【从零开始学习 UVM】1.1、UVM 概述 —— Preface

【从零开始学习 UVM】1.1、UVM 概述 —— Preface

努力,加油每一天鸭~ 827

html上传图片得到图片路径,读取input:file的路径并显示本地图片的方法

Image preview examplevar loadImageFile = (function () {if (window.FileReader) {var oPreviewImg = null, oFReader = new window.FileReader(),rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ie...

weixin_36254564的博客 1373

【XCharts插件】5-2、从Excel中读取数据并更新图表案例(v3.0)

XCharts插件是一款基于UGUI的功能强大、易用、参数可配置的数据可视化图表插件。【Unity3D插件】XCharts插件完全教程《全网最全》-专栏文章目录【XCharts插件】5-1、从Json中读取数据并更新图表案例(v3.0)介绍了如何从Json文件中读取数据,并更新表格,这篇文章就介绍如何从Excel中读取数据,并更新图表吧。

优快云博客专家,Unity3D高级软件工程师,《Unity 3D从入门到实战》作者。 1275

揭秘LLM如何预测下一个词

Transformer结构的大语言模型(LLM)通过自回归训练学习预测下一个词汇,其核心能力源自权重矩阵的动态优化。自注意力层的Wq/Wk/Wv矩阵捕捉语义关联,前馈网络的W1/W2矩阵进行非线性特征提取,LM Head的W_{lm}矩阵将语义映射到词汇概率。训练过程中,这些矩阵通过反向传播不断调整,最终使模型能够根据上下文(如"我"→"爱")生成合理的后续词汇。这种基于矩阵变换的数学机制是LLM智能生成文本的本质原因。(150字)

ZhangJiqun&191cm&85kg 376

php 加载本地图片路径,JavaScript_读取input:file的路径并显示本地图片的方法,复制代码 代码如下: <!doctype - phpStudy...

读取input:file的路径并显示本地图片的方法Image preview examplevar loadImageFile = (function () {if (window.FileReader) {var oPreviewImg = null, oFReader = new window.FileReader(),rFilter = /^(?:image\/bmp|image\/cis\...

weixin_30686891的博客 327

LVGL colorwheel组件教程一(调色板)

【代码】LVGL colorwheel组件教程一(调色板)

摸鱼专家 448

input file获取本地图片路径并转换为base64

input file获取本地图片路径并转换为base64 <template> <div> <input type="file" @change="chose"> </div> </template> <script> export default { methods: { chose(e) {...

zqyzqy22的博客 4078

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

js读取input[type=file]图片,并实时预览

前言: 之前为了实现input[type=file]选择图片后实时展示图片,是把图片上传后,后端返回路径再显示 感觉多此一举,这样的方法实在太笨了,也太慢了,也就摸索出另一种方法FileReader 帮助文档 #html <input type="file" id="file"/> <img src="" id="img"/> <p id="text"&g...

freedom 9036

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

js img读取本地图片

function imgPreview(fileDom) { //判断是否支持FileReader if(window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!"); } //获取文件 var file = fileDom.files[0]; v

qq1014156094的博客 2万+

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

vue 使用input file点击上传本地图片

<input type="file" @change="upData($event)" ref="InputFile" name="files" /> 这里传本地图片给后台(java为例),流程是在点击完input file只后就会发送文件给后台提供的接口,会直接返回一个img路径,然后再传给对应的接口 upData(event) { var...

weixin_30587927的博客 3969

JS-input:file

在chrome浏览器下,为了数据安全,input:file 是不能主动触发 click 事件的,所以,为了美化 input:file 可以使用 opacity:0 达到隐藏的效果。

kelly0721的博客 3498

html上传图片得到图片路径,input type=file上传的图片怎样获取图片路径给img的src属性...

部分html代码<div id="upload"><form action="{:U('Index/uploadhandler')}" enctype="multipart/form-data" method="post" id="imgform"><div id="imglist"></div><div id="updiv"><i...

weixin_39851887的博客 3462

获取input添加图片的路径以及fakepath的解决方法

错误实例(fakepath路径) <html> <input type="file" id="recipient-name"> <script> var file = $("#recipient-name"); //获取id值为...的file类型的表单 $(file).change(functi...

zhang19903848257的博客 1950

tensorflow中几种读取图片文件并显示方法

tensorflow中几种读取图片文件并显示方法 方式一:通过tf.gfile.FastGFile()读取图像文件 tf.gfile模块提供了tensorflow中通用的文件I/O操作。 tf.gfile.FastGFile(filename, mode)函数用于获取文件操作句柄,类似于python中的文本操作open()函数。 第一个参数filename是文件路径,第二个参数mode是文件编码方...

like_study_cat的博客 1183

在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果

通过标签,给它指定type类型为file,可提供文件上传;accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*;multiple:规定是否可以选择多个文件;规定只可上传图片,且可以选择多个文件当然,直接一个input type=file 只能选择上传的文件/资源,如果我们需要在选择图片之后,在当前页面实现预览效果,那么我们可以如下方式来实现HTML代码 ...

weixin_34792272的博客 3474
上一篇: ajax或者jQuery的ajaxSubmit出现请求根本没有发出的问题
下一篇: li在ul中居中显示 并且可以为li设定宽度
gwpJava
博客等级 码龄14年 11粉丝 91原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值