javascript - 如何从radupload获取文件的真实路径

Question

我有这个radupload:

 <telerik:RadUpload ID="RadAsyncUploadBoxLogo"  ClientID="RadAsyncUploadBoxLogo"

                                                            runat="server" ControlObjectsVisibility="None"
                                                            MaxFileInputsCount="1" MaxFileSize="4000000" OverwriteExistingFiles="True" ReadOnlyFileInputs="True"
                                                           Height="10px" TabIndex="12" OnClientFileSelected="OnClientFileSelectedHandler"
                                                            >
                                                            <Localization Remove="" Select=" Seleccionar Imagen" />
                                                        </telerik:RadUpload>

我有这个标签图片

 <asp:Image ID="ImageLogo" ClientId="ImageLogo" CssClass="ImgLogo" runat="server"/>

使用此脚本，我尝试将图像放入图像标记中:

function myOnClientFileSelect(radUpload, eventArgs) {

    var url = radUpload.getFileInputs()[0].Value;
    $('.ImgLogo').attr("src", url);

}

问题是变量 url 抛出一个路径:fakepath/filename ，我读到 radupload 抛出是为了安全，这样其他人就无法访问文件路径，但是如何获取要显示的文件的真实路径它在标签图像上

Answer 1

在哪里file_input是对 <input type="file"> 的引用和 img是对 <img> 的引用, 在更改处理程序中你可以做

if (file_input.files && file_input.files.length) { // some file has been set
    // generate a blob uri to the file
    var uri = URL.createObjectURL(file_input.files[0]);
    // set this as the src of your <img>
    img.src = uri;
}

此代码使用 URL.createObjectURL 这需要 IE 10+，要支持较低版本的 IE，您可能需要使用 <canvas>而不是 <img>这样您就可以以不同的方式加载文件。