最基本图片上传及文件上传

网上图片上传插件很多,我这列出一个最基本的图片及文件上传

步骤:

1.获取file文件数据。

2.ajax的post请求提交数据或xml最原始提交数据。

3.后台保存数据

缺点:后台只能拿到数据流,哪不到文件类型和名称。

代码如下

html

<input type="file" class="file" name="User_Img1" id="User_Img1" accept="image/jpeg,image/gif,image/png,image/bmp">
<input type="file" class="file" name="User_Img1" id="User_Img2" accept="image/jpeg,image/gif,image/png,image/bmp">

js

<script src="js/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            //原始xhr提交
            $("#User_Img1").on("change", function () {
                var reader = new FileReader();
                reader.readAsArrayBuffer($(this)[0].files[0]);
                reader.onload = function () {
                    var data = this.result;
                    var url = "/upload/uploadimg";
                    var xhr = new XMLHttpRequest();
                    xhr.addEventListener("load", uploadComplete, false);
                    xhr.open("POST", url, false);
                    xhr.send(data);
                }
            });

            //ajax分装的提交
            $("#User_Img2").on("change", function () {
                var data = $(this)[0].files[0];
                //var form = new FormData(data);
                $.ajax({
                    url: '/upload/UploadImg',
                    type: 'post',
                    //发送到服务器端的数据的格式,取消默认编码格式  
                    contentType: false,
                    dataType: 'json',
                    data: data,
                    //因为是图片,不要对其作序列化处理  
                    processData: false,
                    success: function (data) {
                        if (data) {
                            alert(data);
                        }
                    },
                    err: function (jqHXR) {
                        console.log(jqXHR.status);
                    }
                });
            });
        })
        

        function uploadComplete(evt) {
            var json = eval('(' + evt.target.responseText + ')');
            $("#User_Img").val(json);

        }
    </script>

c#后台代码MVC的,Web的基本一样

        [HttpPost]
        public ActionResult UploadImg()
        {

            JsonResult code = new JsonResult();

            // code.Data = QueryInfo(order);
            string uploadDate = DateTime.Now.ToString("yyyyMMdd");
            string guid = Guid.NewGuid().ToString();
            //string virtualPath = string.Format("/Upload/{0}", uploadDate);
            string virtualPath = string.Format("/Upload/{0}/{1}{2}", uploadDate, guid, ".jpg");
            string path = Server.MapPath(virtualPath);

            //创建文件夹,保存文件
            string pathFile = Path.GetDirectoryName(path);
            Directory.CreateDirectory(pathFile);

            FileStream fs = new FileStream(path, FileMode.Create);
            Request.InputStream.CopyTo(fs);
            fs.Flush();
            fs.Close();
            code.Data = uploadDate;
            return code;
        }
原文地址:https://www.cnblogs.com/zhuyapeng/p/7691743.html