实时显示从file输入框中打开的图片C:\fakepath路径错误等问题

纯前端文件浏览器实战:浏览器文件操作十大避坑指南 在Web应用中实现文件上传、下载与预览,绕不开File API和浏览器安全模型。开发者常遇到的fakepath路径屏蔽、异步下载被拦截、大文件内存溢出等问题,本质上都是浏览器为保障用户安全而刻意设置的边界。理解这些机制,才能设计出稳定的文件管理功能。借助Blob URL生成临时预览、使用showDirectoryPicker获取目录句柄、通过分片上传控制内存、用RAM盘加速临时缓存,都是工程中行之有效的方案。针对XML缺少样式表、OBJ模型无法渲染等特殊场景,结合前端解析与Three.js可低成本解决。本文 阅读详情

简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片

1、问题的原因

html代码:

<input id="file_upload" type="file" />
<div class="image_container">
    <img id="uploadImg" style="height:130px;width:117px;border-width:0px;"/>
</div>
<script>
    $(function(){
	    $("#file_upload").on("change",function () {
	    	$("uploadImg").attr("src",$(this).val());
	    });
    });
<script>

在控制台中,由于处于安全性等问题,大多数的浏览器(火狐、谷歌等)将真实的本地路径给加密转化成C:\fakepath\1.png,不能实际获取到其本地的真实路径,则在页面中就显示该虚拟路径,则无法访问到该路径,

但是,在ie浏览器中是可以直接获取当前本地的真实路径,并显示在页面中,所以不同的浏览器,对input file的属性的解析都会有所不同。

2、处理方法:

<script>
$(function(){
	$("#file_upload").on("change",function () {
	    var $file = $(this);
	    var fileObj = $file[0]; 
	    var windowURL = window.URL || window.webkitURL;
	    var dataURL;
	    var $img = $("uploadImg"); 
	    if (fileObj && fileObj.files && fileObj.files[0]) {            
            //非ie浏览器直接获取本地的真实路径
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
        } else {
            //ie浏览器直接获取本地的真实路径
            dataURL = $file.val();
        }
        $img.attr('src', dataURL);
	 });
});
</script>

window.URL || window.webkitURL的作用:

        URL对象是硬盘(SD卡等)指向文件的一个路径,如果我们做文件上传的时候,想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(fileObj .files[0]);获得一个http格式的url路径,这个时候就可以设置到<img>中显示了。
window.webkitURL和window.URL是一样的,window.URL标准定义,window.webkitURL是webkit内核的实现(一般手机上就是使用这个),还有火狐等浏览器的实现。

 

 

FilesApp:一个解决浏览器文件处理痛点的本地文件浏览器 日常开发与办公中,文件管理是绕不开的基础操作,而浏览器常被视为单纯的上网工具。实际上,用浏览器直接处理本地文件,经常遇到格式预览混乱、下载被拦截、XML因缺少样式表而渲染错乱、缓存文件侵占磁盘空间等棘手问题。理解这些现象背后的原理,才能找到轻量高效的解决之道。通过Node.js构建本地文件浏览服务,能够将目录遍历、多格式内容预览、安全下载与上传统一收拢到一个入口,既规避了浏览器fakepath与下载拦截等安全机制限制,又能借助内存盘机制优化临时文件的读写效率。这样的工程实践,非常适合开发者、设计师等频繁切换 阅读详情

相关推荐

从零搭建VGGNet

在 forward 方法中实现了前向传播过程,包括卷积、激活、池化和平铺操作,最后通过全连接层得到分类结果。使用 torch.onnx.export 将模型导出为 ONNX 格式的文件 vgg.onnx。导出 ONNX:将模型导出为 ONNX 格式,便于在其他平台或框架中使用。定义 VGG 网络:构建了一个包含多个卷积层、池化层和全连接层的网络。使用 torch.save 将整个模型保存为 vgg.pth 文件。前向传播:对输入数据进行前向传播,得到输出结果。保存模型:将模型保存为 .pth 文件。

开源驱动,创造价值;坦诚清晰,快速失败;让复杂可计算。 522

文件框上传文件选中文件后路径变成了C:\fakepath

现在一个需求需要获取到文件的绝对路径,但是文件框上传文件选中文件后路径变成了C:\fakepath,查了半天都说是浏览器的安全策略导致的,但是找了一下谷歌好像没有ie中的那个设置来取消这个东西,有没有大佬知道其他解决方案. ...

tianyl0n的博客 870

论文地图合规求生指南:5分钟搞定标准地图服务转ArcGIS可用矢量文件

本文提供了一份论文地图合规求生指南,帮助非GIS专业背景的科研人员在5分钟内将标准地图服务的EPS文件转换为ArcGIS兼容的矢量文件。通过详细的工作流程和关键参数设置,确保地图完全符合国家规范,同时节省时间成本。重点关注标准地图服务的合规性和Shapefile转换技巧,适用于紧急情况下的论文地图处理。

weixin_34233974的博客 402

图片上传预览C:\fakepath\解决方案

New Document $(function(){ var path,clip = $("#image"),FileReader = window.FileReader; $("#file").change(function() { if (FileReader) {//chrome浏览器处理 var reader = new Fil

陆一的博客 1万+

值得苦练的100道Python经典练手题(全网最全,附详细答案,建议收藏)

这100道Python练习题涵盖了从基础语法到高级算法、从数据库操作到Web开发的各个方面,是备考数据库系统工程师的绝佳素材。建议按照章节顺序逐一练习,遇到难点可反复钻研,真正掌握每一道题背后的知识点。通过这些练习,不仅能提升Python编程能力,还能加深对数据库系统原理的理解,为考试和实际工作打下坚实基础。

yue_yun_的博客 9396

告别重打包:在Android 9上实现免Root的Frida-Gadget持久化Hook(附AOSP源码修改详解)

本文详细介绍了在Android 9上实现免Root的Frida-Gadget持久化Hook技术方案。通过修改AOSP源码,绕过传统重打包方式面临的签名校验和完整性检查,实现在非Root环境下的系统级Hook。文章包含核心代码修改、编译配置调整及调试技巧,为移动安全研究提供高效稳定的解决方案。

weixin_33726313的博客 501

C:\fakepath 问题

又一次遇到 C:\fakepath路径问题,特此记录一下。 原因大体来说就是:浏览器为了安全,不暴露客户端的完整文件路径。所以获取的文件路径都会是 C:\fakepath\XX\XX.xx之类的路径,不是我们想要的完整路径。 第一次遇到的时候忘记了是如何解决的了,可能是模糊记得通过网上的方法把问题给解决了。这一次在做上传的时候又遇到了该问题,google了一下,网上的解决办法主要分为2种:

一个程序员的专栏 4万+

vasp计算练习1-Si

si的vasp训练流程

qq_41074165的博客 3301

文件上传获取路径显示c:\fakepath\...解决办法

最近再做一个文件上传的功能,突然发现用AJAX上传时 文件路径变成了c:\fakepath\... 最后实在没办法了找到如下解决办法 暂时解决了问题 在页面添加隐藏表单,ajax提交完成时提交隐藏表单,并刷新指定的iframe实现页面不刷新完成文件提交 html &lt;form hidden="hidden" method="post" enctype="multipart/form-...

上官hao的博客 5万+

从CTFShow靶场实战,聊聊Node.js原型链污染漏洞的几种利用姿势(附详细复现步骤)

本文深入剖析Node.js原型链污染漏洞的原理与实战利用,通过复现CTFShow靶场题目(web338-web341),详细演示五种高级利用技巧,包括基础污染、多级污染、模板引擎RCE等,并提供防御方案与最佳实践,帮助开发者提升Web应用安全性。

weixin_30791095的博客 448

【史上最全面esp32教程】oled显示篇

esp32-arduino Oled屏幕的使用

m0_62599305的博客 1万+

火狐浏览器C:\fakepath\文件路径问题

最近火狐版本自动更新到了53.0.3,使用此版本火狐在使用文件上传时路径显示成C:\fakepath\,大致原因是为了安全,浏览器不暴露客户端的完整路径,使用C:\fakepath\代替原来的路径,火狐本身就不显示完整的路径,所以显示文本框中只显示文件名即可,现在变成了C:\fakepath\XXX.zip,做法就是将虚机路径替换成空  $("#selectFile").val().replac

u014701126的专栏 5274

Python 爬虫实战:在丁香医生抓取健康科普文章阅读量,普及健康知识

requests:用于发送 HTTP 请求,获取网页内容。或 lxml:用于解析 HTML 页面,提取目标数据。pandas:用于数据清洗和分析。matplotlib和seaborn:用于数据可视化。通过本项目,我们实现了以下目标:使用 Python 爬虫抓取丁香医生的健康科普文章阅读量。对数据进行清洗和分析,找出热门文章。通过可视化展示数据,并普及健康知识。

u014481728的博客 1567

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

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

zhang19903848257的博客 1950

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

jQuery 获取 input:file 文件路径( Firefox for Ubuntu )

在写一个小项目的时候遇到了一个问题,通过jquery获取选择的文件的路径,最开始选择的是通过.val()获取路径,但是后来发现获取到的路径有问题原始路径是/home/onemue/案例/表情上传--前端/pic.png获取到的路径是C:\fakepath\pic.png,百度了原因还是不知道,但是好在找到了解决办法,通过URL.createObjectURL()获取对象的URL,获取到的是 blob:null/ed7d6cfa-35f8-4e3c-8fb7-82d7dce74b81,可以正常设置给<i

一生亦木 2745

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

IE8中JS获取文件路径为fakePath的解决办法

今天在做上传图片时遇到的问题,JS中获取input(type="file")中的图片地址时,出现路径有误。调试发现获取的路径变为形如:C:\fakePath\*,从而出现错误。 初步解决办法:浏览器安全性设置; 操作:打开IE浏览器-->工具(Alt+x)-->Internet选项-->安全-->自定义级别-->“其他”中的“将本地文件上载至服务器时包含...

aap6283的博客 538

深度学习工具包 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")

IE8上传文件时javascript取文件的本地路径的问题("C:\fakepath ...

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33720452的博客 150

jQuery图片上传前先在本地预览(不经过后端处理)

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的。百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个...

weixin_34241036的博客 158

C:\\fakepath\\文件路径问题

今天在做导入时,不论是什么路径上传的文件,路径都变成了"C:\fakepath\"+文件名的形式,查询了下,这是ie8下的安全设置问题。 以下就是操作步骤:工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可。Js代码  //附带不用修改浏览器安全配置的javascript代码,兼容ie, firefo

Nemo的笔记本 1万+

js获取input file的虚拟路径C:\fakepath\解决方法

js获取input file的虚拟路径C:\fakepath\解决方法函数:文本框 在网上百度了很多方法,基本上在chome浏览器上获取绝对路径的方法都行不通,目前也没找到合适的通过路径解决问题的方法,后期会继续想办法的。 这里就写一下通过base64上传图片的方法,聊胜于无。 函数: function ii(obj) { //解决C:\fakepath问题-----...

qq_31839039的博客 1万+

Internet浏览器,C:\fakepath路径问题

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

Vincebran的博客 3415

js获取fileupload的绝对路径时总是得到c:fakepath+文件名的解决方法

解决方法: Internet选项-》安全-》自定义级别-》将文件下载到服务器时包含本地目录路径  启用就可以了。

weixin_33961829的博客 1031

图片预览出现C:\fakepath\问题

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34376986的博客 1406

上传图片input-file表单元素值为C://fakepath,不能得到本地真实路径解决方法

由于浏览器安全设置原因,使得input file不能获取正确的文件地址 ,   解决方法: 工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”就能解决问题。

xmlife的专栏 4375

input file上传图片 获取图片路径出现fakepath解决办法

htmljs将图片路径转化为这种:blob:http://localhost:8082/ec421499-9670-41de-ac29-03846acdbce2http://www.jq22.com/jquery-plugins%E4%B8%8A%E4%BC%A0-1-jq

shuqiang111的博客 3784
上一篇: Redis 总结精讲
下一篇: 关于Spring--hessian远程调用接口服务配置
Array*
博客等级 码龄9年 2粉丝 19原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值