<input type="file"&

1.如何用ajax上传文件

想要用ajax上传文件，需要借助一个javascript对象FormData，首先我们先在页面上写一个input

<div id="preview">
    <input type="file" id="inputfile" accept="image/*">
</div>

这里在input外面加个div是为了预览图片。然后用FormData对象来获取上传的文件。

 $("#Save").click(function () {
            var data = new FormData();
            var imgfile = $("#inputfile");
            var fileobj = imgfile.get(0).files[0];  //封面图
            data.append("img", fileobj);

            $.ajax({
                url: "../handler/GetDataHandler.ashx",
                type: "post",
                data: data,
                async: false,
                dataType: "JSON",
                processData: false,
                contentType: false,
                success: function (data) {
               
                }
            })
            location.reload();
        });

在ajax中，记得设置

 processData: false,contentType: false,

FormData对象用以将数据编译成键值对，以便用[XMLHttpRequest]来发送数据，可以发送了，来看一下如何接收这个文件。

     HttpPostedFile file = context.Request.Files["img"];
                    string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
                    uploadPath += "..\\upload\\";
                    string filepath = "";
                    if (file != null)
                    {
                        if (!Directory.Exists(uploadPath))
                        {
                            Directory.CreateDirectory(uploadPath);
                        }
                        string cfilename = file.FileName;
                        string aFirstName = cfilename.Substring(cfilename.LastIndexOf("\\") + 1, (cfilename.LastIndexOf(".") - cfilename.LastIndexOf("\\") - 1)); //文件名
                        string aLastName = cfilename.Substring(cfilename.LastIndexOf(".") + 1, (cfilename.Length - cfilename.LastIndexOf(".") - 1)); //扩展名
                        aFirstName = DateTime.Now.Ticks.ToString() + "-" + Guid.NewGuid();
                        string newfilename = aFirstName + "." + aLastName;
                        file.SaveAs(uploadPath + newfilename);
                        filepath = "/upload/" + newfilename;
                    }

可以上看到，接收图片的方法直接使用HttpPostedFile 来接收就行了。

2.如何预览图片

想要预览图片，想要通过<input type="file">读取文件路径是不可行的，所以我们需要借助一个FileReader的对象，具体实现看代码。

 var preview = document.querySelector('#preview');
    var eleFile = document.querySelector('#inputfile');
    eleFile.addEventListener('change', function () {
        var file = this.files[0];
        if (file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                // ͼƬbase64»¯
                var newUrl = this.result;
                preview.style.backgroundImage = 'url(' + newUrl + ')';
                $("#inputfile").hide();
            };
        }
    });

感谢。https://www.cnblogs.com/web-wjg/p/7799173.html
放两张效果图。

image.png
image.png
Study hard and make progress every day.

更多学习资料请关注"爱游戏爱编程"。

爱游戏爱编程.jpg