在div中显示上传的照片

Question

我有这样的形式

我必须做文件上传器，它会在这里显示上传的图像（圆圈）。

好的我可以上传图片并使用that或类似内容保存在服务器上但是如何立即在圈子中显示？

是否有必要将照片保存在硬盘上？

Answer 1

您可以在jQuery的帮助下选择后立即显示图像。

这是Html

 <div class="formRow">
    <label for="contact_name" class="fieldLabel">
        File Upload
    </label>
    <div class="field">
        <input type="file" name="FileUpload" id="FileUpload" />
    </div>
 </div>

 <div class="formRow">
    <label for="contact_name" class="fieldLabel">
    </label>
    <div id="dvPreview">
    </div>
 </div>

的jQuery

jQuery(function ($) {        
    jQuery('#FileUpload').change(function () {
        jQuery('#dvPreview').html("");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test($(this).val().toLowerCase())) {
            if (jQuery.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                jQuery('#dvPreview').show();
                jQuery('#dvPreview')[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = jQuery(this).val();
            }
            else {
                if (typeof (FileReader) != "undefined") {
                    jQuery('#dvPreview').show();
                    jQuery('#dvPreview').append("<img style='width:200px; height:100px' />");
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        jQuery('#dvPreview img').attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(this)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            }
        }
        else {

        }
    });
});

Answer 2

上传后返回视图。然后请返回模型或视图中的图像路径，并在视图级别检查是否有一些值，然后在图像标记中填充..这也可以异步完成。