使用JS獲取input file的路徑C:\fakepath\問題及解決方法
更新時間：2024年01月18日 15:58:34 作者：cgsthtm
這篇文章主要介紹了使用JS獲取input file的路徑C:\fakepath\問題及解決方法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
有時候，我們給程序添加完一個功能，在本地測試是完全可以正常運行的，但一發(fā)布到Web上就各種報錯，這時候我們就需要注意啦！
1.問題
頁面有一個input file服務(wù)器控件，一個div，div是image標簽的容器，當點擊input file的值改變，我們往div里追加image標簽；
但當通過js的onchange事件動態(tài)獲取input file 的路徑的時候，發(fā)現(xiàn)console.log(path)打印出的路徑是被瀏覽器屏蔽的，例如：C:\fakepath\file.jpg
2.原因
由于瀏覽器的安全機制，當我們獲取input file的路徑時被fakepath代替，隱藏了真實物理路徑。
當然，調(diào)整瀏覽器的瀏覽器安全設(shè)置可以解決這個問題，但是這種解決辦法顯然不是我們想要的，不可能讓每個用于都去設(shè)置瀏覽器安全選項。
3.認識window.URL.createObjectURL()
URL.createObjectURL()方法會根據(jù)傳入的參數(shù)創(chuàng)建一個指向該參數(shù)對象的URL，這個URL的生命僅存在于它被創(chuàng)建的這個文檔里，新的對象URL指向執(zhí)行的File對象或Blob對象。
語法：objcetURL = window.URL.createObjectURL(file || blob);
參數(shù)：File對象和Blob對象；File對象就是一個文件，比如我用file type="file"標簽來上傳文件，那么里面的每個文件都是一個file對象。Blob對象就是二進制數(shù)據(jù)，比如在XMLHttpRequest里，如果指定requestType為blob，那么得到的返回值也是一個blob對象。
每次調(diào)用createObjectURL的時候，一個新的URL對象就被創(chuàng)建了。即使你已經(jīng)為同一個文件創(chuàng)建過一個URL.，如果你不再需要這個對象，要釋放它，需要使用URL.revokeObjectURL()方法.。當頁面被關(guān)閉，瀏覽器會自動釋放它，但是為了最佳性能和內(nèi)存使用，當確保不再用得到它的時候,就應(yīng)該釋放它。
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();//自定義的裁剪圖片函數(shù)
});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>到此這篇關(guān)于使用JS獲取input file的路徑C:\fakepath\問題的文章就介紹到這了,更多相關(guān)js獲取路徑C:\fakepath\內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
bootstrap基本配置_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了bootstrap基本配置，詳細講解如何下載并安裝 Bootstrap，討論 Bootstrap 文件結(jié)構(gòu)，并通過一個實例演示它的用法。2017-07-07
這篇文章主要向大家推薦一個原生js實現(xiàn)淘寶購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
js window.print實現(xiàn)打印特定控件或內(nèi)容
window.print可以打印網(wǎng)頁，但有時候我們只希望打印特定控件或內(nèi)容，怎么辦呢？可以把要打印的內(nèi)容放在div中，然后用下面的代碼進行打印，希望對大家有所幫助2013-09-09
今天小編就為大家分享一篇關(guān)于在LayUI中使用AJAX提交巨坑記錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
JavaScript實現(xiàn)的購物車效果可以運用在好多地方
JavaScript實現(xiàn)的購物車效果，當然這個效果可以運用在好多地方，比如好友的選擇，人力資源模塊等等，需要的朋友可以參考下2014-05-05
javascript中動態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動態(tài)加載js文件多種解決辦法，有需要的朋友可以參考一下2013-11-11
詳解JavaScript創(chuàng)建數(shù)組的三種方式
這篇文章主要介紹了JavaScript創(chuàng)建數(shù)組的三種方式：直接聲明,?以對象方式創(chuàng)建數(shù)組和使用?Array.from()?方法創(chuàng)建,并通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-06-06
Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無關(guān)的信息,讀取的時候是通過dataset對象，使用”.”來獲取屬性，需要去掉data-前綴2023-06-06
Use Word to Search for Files...2007-06-06
使用apply方法實現(xiàn)javascript中的對象繼承
javascript中的對象繼承的方法有很多，在接下來的文章中為大家介紹下使用apply方法是如何實現(xiàn)的2013-12-12