zoukankan      html  css  js  c++  java
  • Layui上传图片2.0版

    1.View

    <button type="button" class="layui-btn" id="test"></button>
    
    <h3>预览</h3>
    
    <img id ="img" src="">

    2.Js

    <script>
      $(function () {
        layui.use('upload', initUp);
      })
    
      function initUp() {
        var upload = layui.upload;
    
        //执行实例
        var uploadInst = upload.render({
        elem: '#test',         //绑定元素
        url: '/Home/SaveImages',    //上传接口
        accept: "images",         //默认是图片类型 images
        exts: "",            //扩展名的限制
        done: function (res) {
        //上传完毕回调
          if (res.code == 0) {
            var url = "/Home/GetImage?imgName=" + res.data + "&_dc=new Date()";
            $("#img").attr("src", url);
          }
        },
        error: function () {
        //请求异常回调
        },
      });
    }
    </script>

    3.Controller

    string IMAGES_PATH = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"App_Dataimages");  //定义存放图片文件夹
    
    public JsonResult SaveImages()
    {
      LayUIVOState vo = new LayUIVOState();
      var files = HttpContext.Request.Files;
      if (files.Count == 0)
      {
        vo.code = -1;
      }
      else
      {
        HttpPostedFileBase file = files[0];
        string fileName = file.FileName;
        string fullName = Path.Combine(IMAGES_PATH, fileName);
        file.SaveAs(fullName);
        vo.data = fileName;
      }
      return Json(vo);
    }
    
    public FileResult GetImage(string imgName)
    {
      string path = Path.Combine(IMAGES_PATH, imgName);
      return new FileStreamResult(new FileStream(path, FileMode.Open), "image/jpeg");
    }

    4.Models

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace UploadFiles.Models
    {
      public class LayUIVOState
      {
        public int code { get; set; }
        public string msg { get; set; }
        public object data { get; set; }
      }
    }
  • 相关阅读:
    python format() 函数
    -bash: fork: Cannot allocate memory 问题的处理
    阿里云telnet 3306端口失败
    npm install报错 npm ERR! enoent ENOENT: no such file or directory
    springboot启动后总是自己shutdown
    thymeleaf给bootstrap自定义变量赋值
    java通过反射拷贝两个对象的同名同类型变量
    使用awk按照行数切割文件
    Iterable接口
    mac brew update 报错
  • 原文地址:https://www.cnblogs.com/HansZimmer/p/9295008.html
Copyright © 2011-2022 走看看