有時候，我們給程式添加完一個功能，在本地測試是完全可以正常啟動並執行，但一發布到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();//自訂的裁剪圖片函數 });
<%@ 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
