使用JS获取input file的路径C:\fakepath\问题及解决方法
更新时间：2024年01月18日 15:58:34 作者：cgsthtm
这篇文章主要介绍了使用JS获取input file的路径C:\fakepath\问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
有时候，我们给程序添加完一个功能，在本地测试是完全可以正常运行的，但一发布到Web上就各种报错，这时候我们就需要注意啦！
1.问题
页面有一个input file服务器控件，一个div，div是image标签的容器，当点击input file的值改变，我们往div里追加image标签；
但当通过js的onchange事件动态获取input file 的路径的时候，发现console.log(path)打印出的路径是被浏览器屏蔽的，例如：C:\fakepath\file.jpg
2.原因
由于浏览器的安全机制，当我们获取input file的路径时被fakepath代替，隐藏了真实物理路径。
当然，调整浏览器的浏览器安全设置可以解决这个问题，但是这种解决办法显然不是我们想要的，不可能让每个用于都去设置浏览器安全选项。
3.认识window.URL.createObjectURL()
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL，这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或Blob对象。
语法：objcetURL = window.URL.createObjectURL(file || blob);
参数：File对象和Blob对象；File对象就是一个文件，比如我用file type="file"标签来上传文件，那么里面的每个文件都是一个file对象。Blob对象就是二进制数据，比如在XMLHttpRequest里，如果指定requestType为blob，那么得到的返回值也是一个blob对象。
每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.，如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法.。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。
4.解决办法
$(document).on('change', '#PictureUrl', function () { //PictureUrl为input file 的id
//console.log(this.files[0]);
function getObjectURL(file) {
var url = null;
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
var objURL = getObjectURL(this.files[0]);//这里的objURL就是input file的真实路径
$('#imgContainer').html("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />");
cutImg();//自定义的裁剪图片函数
});5.例子
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpFileBox.aspx.cs" Inherits="PublicPage_UpFileBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="jquery.Jcrop.min.css" rel="external nofollow" rel="stylesheet" />
<script src="../artDialog/artDialog.source.js?skin=default"></script>
<script src="../artDialog/plugins/iframeTools.js"></script>
<script src="../artDialog/msgBox.js" type="text/javascript"></script>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<script src="jquery.color.js"></script>
<style type="text/css">
body {
font: Arial, Helvetica, sans-serif;
color: #000;
line-height: 24px;
font-size: 12px;
}
</style>
<script type="text/javascript">
art.dialog.data('FileName', '<%=FileName %> ');
art.dialog.data('FileSize', '<%=FileSize %> ');
art.dialog.data('FilePath', '<%=FilePath %> ');
</script>
</head>
<body style="background-color: White">
<form id="form1" runat="server">
<table border="0" cellpadding="1" cellspacing="0" style="height: 550px; width: 650px">
<tr height="350">
<td colspan="2">
<div id="imgContainer" style="width: 640px; height: 350px; border: 1px solid #c0c0c0">
<h3>点击浏览按钮，请选择要上传的图片</h3>
</div>
<input type="hidden" name="x1" id="x1" value="" runat="server" />
<input type="hidden" name="x2" id="x2" value="" runat="server" />
<input type="hidden" name="y1" id="y1" value="" runat="server" />
<input type="hidden" name="y2" id="y2" value="" runat="server" />
<input type="hidden" name="w" id="w" value="" runat="server" />
<input type="hidden" name="h" id="h" value="" runat="server" />
</td>
</tr>
<tr height="30">
<tr height="30">
<td align="left">
<input id="PictureUrl" runat="server" name="File1" type="file" /></td>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<td width="81" align="left">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="上传" Width="60px" CausesValidation="False" /></td>
</tr>
<td class="inputexplain" style="padding-left: 5px" colspan="2">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" BackColor="#FFC0C0"
BorderWidth="1px" ControlToValidate="PictureUrl" Display="Dynamic" ErrorMessage="请选择您要上传的文件"
SetFocusOnError="True" Width="138px"></asp:RequiredFieldValidator>
<asp:Label ID="LB_PicError" runat="server" BackColor="#FFC0C0" BorderWidth="1px"
ForeColor="Red" Text="文件上传失败！" Visible="False" Width="343px"></asp:Label>
<asp:Label
ID="LB_Success" runat="server" BackColor="#C0FFFF" BorderWidth="1px" ForeColor="Teal"
Text="文件上传成功！" Visible="False" Width="122px"></asp:Label><asp:Label ID="LB_Fail"
runat="server" BackColor="#FFC0C0" BorderWidth="1px" ForeColor="Red" Text="文件上传失败！"
Visible="False" Width="126px"></asp:Label><br>
<%=hint %></td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
});
$(document).on('change', '#PictureUrl', function () {
console.log(this.files[0]);
function getObjectURL(file) {
var url = null;
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
var objURL = getObjectURL(this.files[0]);
$('#imgContainer').html("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />");
cutImg();
});
function cutImg() {
var jcrop_api;
$('#target').Jcrop({
bgFade: true,
bgOpacity: .2,
setSelect: [45, 55, 607, 320],
onChange: showCoords,
}, function () {
jcrop_api = this;
});
}
function showCoords(c) {
$('#x1').val(c.x);//通过<input type='hidden' runat='server'>给后台提供选框的宽高
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>到此这篇关于使用JS获取input file的路径C:\fakepath\问题的文章就介绍到这了,更多相关js获取路径C:\fakepath\内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇js获取css的各种样式并且设置他们的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了JS实现页面数据懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
JavaScript对象数据结构基本形式:{ key : value},其中key:value就为对象的一个属性,key作为属性名称,value为属性值,这值可以是任何JavaScript数据类型。2009-10-10
Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台。下面这篇文章主要给大家介绍了关于HTTP传输中gzip压缩的相关资料，文中介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了JavaScript实现重力下落与弹性效果的方法,结合实例形式分析了javascript重力下落及弹性效果的原理与具体实现技巧,需要的朋友可以参考下2017-12-12
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
这篇文章主要介绍了详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
今天小编就为大家分享一篇layui 给数据表格加序号的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
今天小编就为大家分享一篇layui数据表格重载实现往后台传参，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画，以为是用flash做的，下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果，需要的朋友参考下吧2016-02-02
在本文为大家介绍下把字符串转化为对象：把文本转化为对象、把文本转化为数组，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论