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

在Add pageadd.aspx中使用输入文件控件来预览使用Jquery并上载图像效果非常好

使用不同的url参数时，Add Pageadd.aspx用于从上载的文件路径加载图像，并在加载时预览图像

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

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

要预览的Jquery代码

图像预览快照

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

最终实现了它

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

在代码中做了一些调整

这是工作代码

Jquery

Aspx

---

在页面加载中更新了serversidec中ImageimgLogo的url值。

只是为了澄清一下，您希望这是一个单独的前端解决方案吗？前端将是首选，因为我正在使用jquery预览它，我现在不介意c/vb.net解决方案。本文应该对您进行分类：在我看来，任何服务器端解决方案都是重复的。如果您打算使用ajax将文件发送到服务器，例如纯粹为了显示预览，那么您也可以上传该文件。它可以工作，但如果我没有记错的话，只能使用IE10格式。本文中提到的这些解决方案在受支持时是跨浏览器的。老实说，预览不是必须的，它是一个好东西！当我们能够解决自己的问题时，这是很好的。真正的伴侣，这是一种愉快的感觉

 $(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>

// 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");
                }
            });  

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>