使用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\内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序实现传递多个参数与事件处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
JavaScript中的事件循环机制是一种异步处理机制，通过维护事件队列和消息队列，实现任务的分发和执行。事件循环机制由主线程和任务队列构成，主线程运行完当前任务后会检查任务队列中是否有待执行的任务，如有则执行，否则等待2023-04-04
这篇文章主要介绍了关于JavaScript中name的意义冲突,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了BootStrap入门教程(三)之响应式原理的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了Mint-UI时间组件起始时间问题的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
Fastest way to build an HTML string(拼装html字符串的最快方法)
Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 20092011-08-08
这篇文章主要为大家详细介绍了JavaScript中参数传递三种方式：按值传递、引用传递和共享传递,文中的示例代码讲解详细,感兴趣的可以了解下2023-09-09
在开发移动应用程序时,我们经常需要处理用户交互事件,然而,有时候这些事件会冒泡,导致意外的行为和不良用户体验,在本文中,我们将探讨如何使用UniApp框架来阻止事件冒泡,并提供一些示例代码来帮助您理解如何实现这一功能,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了JS请求servlet功能,结合具体实例形式分析了javascript使用ajax请求servlet端响应的主要功能代码与相关操作技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了JS交互点击WKWebView中的图片实现预览效果,需要的朋友可以参考下2018-01-01
最新评论