美文网首页
<input type="file"&

<input type="file"&

作者: 十柒年 | 来源:发表于2018-09-30 09:26 被阅读13次

    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

    相关文章

      网友评论

          本文标题:<input type="file"&

          本文链接:https://www.haomeiwen.com/subject/zsbioftx.html