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

背后的代码：首先，您需要在应用程序中添加Generic Handler（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) 
    { 

    }
}

另外，请查看此文章 how to post data on Generic Handler in Asp.net

如何查看上传图片的预览（不要！）然后保存它的地址？

1 个答案: