zoukankan      html  css  js  c++  java
  • 最基本图片上传及文件上传

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

    步骤:

    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;
            }
  • 相关阅读:
    作为PHP开发者请务必了解Composer
    如何优雅的使用 phpStorm 开发工具
    Sublime Text 3的安装,卸载,更新,激活
    高效的一天可以这样过
    编译安装PHP开发环境
    Linux操作系统Centos7.2版本搭建Apache+PHP+Mysql环境
    PHP面试题分享与答案
    腾讯2016校招编程题【PHP实现】
    程序的优化(PHP)
    在Mac系统下配置PHP运行环境
  • 原文地址:https://www.cnblogs.com/zhuyapeng/p/7691743.html
Copyright © 2011-2022 走看看