您的位置：首页 > Web前端 > JavaScript

使用js获取input file的路径C:\fakepath\问题

2017-07-01 19:02 761 查看
有时候，我们给程序添加完一个功能，在本地测试是完全可以正常运行的，但一发布到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="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  fakepath
相关文章推荐
新的分享
章节导航