如何从文件系统加载图片并使用 Jquery 进行预览

Question

在添加页面（add.aspx）中使用输入文件控件来预览（使用 Jquery）和上传图像（完美运行）。

虽然使用不同的url参数，但添加页面（add.aspx）的目的是从上传的文件路径加载图像并在加载时预览。

我被卡住了，不知道如何实现它？任何帮助将不胜感激！

如果我使用相同的 input:file 来使用 jquery 代码动态加载图片会容易得多，因为我正在页面中加载大量图片？

要预览的 Jquery 代码

 $(function () {
        // Create the close button
        var closebtn = $('<button/>', {
            type: "button",
            text: 'x',
            id: 'close-preview',
            style: 'font-size: initial;',
        });
        closebtn.attr("class", "close pull-right");
        // Set the popover default content
        $('#div_email_logo').popover({
            trigger: 'manual',
            html: true,
            title: "<strong>Preview</strong>" + $(closebtn)[0].outerHTML,
            content: "There's no image",
            placement: 'bottom'
        });
        // Clear event
        $('#btn_email_logo').click(function () {
            $('#div_email_logo').attr("data-content", "").popover('hide');
            $('#txb_email_logo').val("");
            $('#btn_email_logo').hide();
            $('#div_email_logo_preview input:file').val("");
            $("#sp_email_logo").text("Browse");
        });
        // Create the preview image
        $("#div_email_logo_preview input:file").change(function () {
            var img = $('<img/>', {
                id: 'dynamic',
                width: 250,
                height: 200
            });
            var file = this.files[0];
            var reader = new FileReader();
            // Set preview image into the popover data-content
            reader.onload = function (e) {
                $("#sp_email_logo").text("Change");
                $("#btn_email_logo").show();
                $("#txb_email_logo").val(file.name);
                img.attr('src', e.target.result);
                $("#div_email_logo").attr("data-content", $(img)[0].outerHTML).popover("show");
            }
            reader.readAsDataURL(file);
        });

 <div class=" image-preview form-group  col-lg-6" id="div_email_logo" style="display: table">
                                <input type="text" class="form-control image-preview-filename" runat="server" disabled="disabled" placeholder="email Logo" id="txb_email_logo">
                                <!-- don't give a name === doesn't send on POST/GET -->
                                <span class="input-group-btn">
                                    <!-- image-preview-clear button -->
                                    <button type="button" class="btn btn-default image-preview-clear" id="btn_email_logo" style="display: none;">
                                        <span class="glyphicon glyphicon-remove"></span>Clear
                                    </button>
                                    <!-- image-preview-input -->
                                    <div class="btn btn-default image-preview-input" id="div_email_logo_preview">
                                        <span class="glyphicon glyphicon-folder-open"></span>
                                        <span class="image-preview-input-title" id="sp_email_logo">Browse</span>
                                        <%--  <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />--%>
                                        <asp:FileUpload ID="uplemail_Logo" runat="server" class="image-logo" err="required" filetype="image" accept=".jpg , .gif ,.png ,.jpeg" required="True" />
                                        <!-- rename it -->
                                    </div>
                                </span>
                            </div>

图像预览快照

所有的例子都是添加图片时的页面？我想使用同一页面从文件系统加载上传的图像？最好是相同的控件和代码中的细微调整？

Answer 1

终于成功了，

现在我可以加载图片并在页面加载时进行预览

对代码做了一些调整

这是工作代码

jQuery

// Create the close button
            var closebtn = $('<button/>', {
                type: "button",
                text: 'x',
                id: 'print-close-preview',
                style: 'font-size: initial;',
            });
            closebtn.attr("class", "close pull-right");
            // Set the popover default content
            $('#div_print_logo').popover({
                trigger: 'manual',
                html: true,
                title: "<strong>Preview</strong>" + $(closebtn)[0].outerHTML,
                content: "There's no image",
                placement: 'bottom'
            });
            // Clear event
            $('#btn_print_logo').click(function () {
                $('#div_print_logo').attr("data-content", "").popover('hide');
                $('#txb_print_logo').val("");
                $('#btn_print_logo').hide();
                $('#div_print_logo_preview input:file').val("");
                $("#sp_print_logo").text("Browse");
            });
            // Create the preview image
            $("#div_print_logo_preview input:file").change(function () {
                var img = $('<img/>', {
                    id: 'dynamic',
                    width: 250,
                    height: 200
                });
                var file = this.files[0];
                var reader = new FileReader();
                // Set preview image into the popover data-content
                reader.onload = function (e) {
                    $("#sp_print_logo").text("Change");
                    $("#btn_print_logo").show();
                    $("#txb_print_logo").val(file.name);
                    img.attr('src', e.target.result);
                    $("#div_print_logo").attr("data-content", $(img)[0].outerHTML).popover("show");
                }
// New tweaks
                if (file) {
                    reader.readAsDataURL(file);
                }
                else {
                    $("#sp_print_logo").text("Change");
                    $("#btn_print_logo").show();
                    var src = $('#<%= imgPrintLogo.ClientID%>').attr("src");
                    img.attr('src', src);
                    $("#div_print_logo").attr("data-content", $(img)[0].outerHTML).popover("show");
                }
            });  

aspx

div class=" image-preview form-group  col-lg-6" id="div_email_logo" style="display: table">
                                <input type="text" class="form-control image-preview-filename" runat="server" disabled="disabled" placeholder="email Logo" id="txb_email_logo">
                                <!-- don't give a name === doesn't send on POST/GET -->
                                <span class="input-group-btn">
                                    <!-- image-preview-clear button -->
                                    <button type="button" class="btn btn-default image-preview-clear" id="btn_email_logo" style="display: none;">
                                        <span class="glyphicon glyphicon-remove"></span>Clear
                                    </button>
                                    <!-- image-preview-input -->
                                    <div class="btn btn-default image-preview-input" id="div_email_logo_preview">
                                        <span class="glyphicon glyphicon-folder-open"></span>
                                        <span class="image-preview-input-title" id="sp_email_logo">Browse</span>

                                        <asp:FileUpload ID="uplemail_Logo" runat="server" class="image-logo" err="required" filetype="image" accept=".jpg , .gif ,.png ,.jpeg" required="True" />
 <%-- Added Tweaks--%>
                                        <asp:Image ID="imgLogo" runat="server" Width="250" height="200" style="display: none;"/>
                                        <!-- rename it -->
                                    </div>
                                </span>
                            </div>

在页面加载中更新了服务器端（c#）中 Image(imgLogo) 的 url 值。