jQuery 导入导出文件和图片

jQuery 导入导出文件和图片


导入图片:
页面:
======图片上传===========
        文件读取器FileReader
        var imageReader = new FileReader();

        图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp
   regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;

        文件读取器onload事件 在读取文件完成后触发
        imageReader.onload = function (evt) {
            console.log(evt);
            $("#userPicture").attr("src", evt.target.result);
        }

        双击图片 触发 文件输入框的点击事件
        function showImageSelectDialog() {
            $("#userPictureFile").click();
        }
        文件输入框改变事件,改变时读取图片
        function loadImgToImg() {
            获取文件输入框里面的文件
            var file = $("#userPictureFile").get(0).files[0];

            判断读取的文件是否是需要的文件类型
            if (regexImageFilter.test(file.type)) {
                使用文件读取器读取文件。并把文件转为URL(Base64编码)
                imageReader.readAsDataURL(file);
            } else {
                alert("选择的不是一个有效的图片文件");
            }
        }
说明:先声明一个文件读取器FileReader,再写出图片的正则表达式过滤掉不希望上传的文件类型,用一个img标签弄出一个装图片的容器并且给这个容器添加一个双击事件,双击触发作为文件选择控件input标签中的点击事件再获取文件控件中的文件,利用之前写好的的正则表达式进行判断是否是我们需要的文件,如果是利用文件读取器读取文件。并且把文件转为URL(Base64编码)
不是就弹出提示,
   控制器:
//保存用户头像
           //==检查存放用户头像的目录是否存在
if (!System.IO.Directory.Exists(Server.MapPath("~/Document/userPicture/")))
{
System.IO.Directory.CreateDirectory(Server.MapPath("~/Document/userPicture/")); 
}
 //判断是否上传了图片
if (userPicture != null && userPicture.ContentLength > 0)
{
                                            {
//获取文件的扩展名称
string imgExtension = System.IO.Path.GetExtension(userPicture.FileName); 
    //拼接要保存的文件名称
string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + "_" + Guid.NewGuid() + imgExtension; 
//拼接文件保存的路径
string filePath = Server.MapPath("~/Document/userPicture/") + fileName;

     //保存上传的文件到硬盘
     userPicture.SaveAs(filePath);

      //文件名称保存到user对象
     user.picture = fileName;
}
说明:在控制器检查存放用户头像的目录是否存在,存在就获取文件的扩展名称并且拼接要保存的文件名称再拼接文件保存的路径  保存上传的文件到硬盘

导出文件: 
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828151341185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828151356952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)

说明:页面直接进行请求控制器,控制器操作如上,导出之前需要本身有一个模板,就是控制传过来的数据。

导入文件:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828151438323.png#pic_center)

 
先在页面显示一个下载的按钮给它绑定点击事件
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828151500843.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)

再获取文件路径检查是否存在,再返回页面。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828151514154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828151532955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)

 
 
给上传按钮绑定点击事件,进行获取文件用post进行请求并且进行返回数据的处理。
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828152307658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828152337787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828152354317.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828152410590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)

 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828152422855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)

 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200828152431700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MzUwOTM5,size_16,color_FFFFFF,t_70#pic_center)

 
 
 
通过页面请求的方法名在控制器写出这个方法内容,控制器方法获取页面传过来的数据进行一些操作,判断传过来的数据是否符合我们需要的数据,再把需要导入的数据加入已存在的数据里面,再把对新数据进行判断是否一些不能重复的数据重复了或规定数据的填写范围,再使用事务进行最后的验证,成功就返回页面所需要的数据。

猜你喜欢

转载自blog.csdn.net/m0_46350939/article/details/108280151