javascript - 我怎样才能看到上传图片的预览(不要!)然后保存它的地址？

Question

我要上传图片但首先我想查看图像预览，然后当用户单击另一个 asp:button 时，保存图像。

对于预览部分，我使用以下代码:

<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        $('#image').on('change', function (event) {

            var image = this.files[0]; 
            $('#singlePreview').html(''); 
            var reader = new FileReader();

            reader.onload = function (e) { 
                $('<img src="' + e.target.result + '" class="thumbnail img-responsive" width="150" alt="Loading..">').appendTo($('#singlePreview'));
            }

            reader.readAsDataURL(image);
        });
    });
</script>

& 在 HTML 格式中:

<div class="form-group">
     <label for="image">image</label>
     <input type="file" id="image" accept="image/*" />
</div>
<div id="singlePreview"></div>

但是现在不知道如何保存上传的图片网址。因为我对 JavaScript 或 jquery 一无所知...

我知道 this.files[0] 是我的地址。但我想在代码隐藏 (C#) 中使用它。

Answer 1

可以调用ajax上传图片

 // var file;
    
    $('#image').on('change', function (event) {
        var image = this.files[0]; 
        $('#singlePreview').html(''); 
        var reader = new FileReader();
        
        reader.onload = function (e) { 
            $('<img src="' + e.target.result + '" class="thumbnail img-responsive" width="150" alt="Loading..">').appendTo($('#singlePreview'));
        }
        reader.readAsDataURL(image);
        //file=this.files[0];
    });
    
    //This is your button click
    $("#btnUpload").on('click',function(){
           uploadFile();
    });
    
    function uploadFile() {
         var formData = new FormData();
         formData.append('file', $('#image')[0].files[0]);
    
          $.ajax({
                type: 'post',
                url: 'pathTo/genericHandler.ashx',
                data: formData,
                success: function (status) {
                     alert("Success")
                     },
                 error function (status) {
                     alert("Failed!");
                     },
                processData: false,
                contentType: false
            });
    }

---

代码隐藏:首先，您需要在应用程序中添加通用处理程序(ashx 文件)。下面的代码将保存上传的文件

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    try
    {
        string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");
        string[] files;
        int numFiles;
        files = System.IO.Directory.GetFiles(dirFullPath);
        numFiles = files.Length;
        numFiles = numFiles + 1;

        string str_image = "";

        foreach (string str in context.Request.Files)
        {
            HttpPostedFile file = context.Request.Files[str];
            string fileName = file.FileName;
            string fileExtension = file.ContentType;
            if (!string.IsNullOrEmpty(fileName))
            {
                fileExtension = Path.GetExtension(fileName);
                str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension;
                string pathToSave = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image;
                file.SaveAs(pathToSave);
            }
        }
        // database record update logic here  ()
        context.Response.Write(str_image);
    }
    catch (Exception ac) 
    { 
    
    }
}