• Dapper上传图片


    <h2>添加商品</h2>

    <table class="table table-bordered">
    <tr>
    <td>商品名称:</td>
    <td><input id="name" type="text" /></td>
    </tr>
    <tr>
    <td>商品图片:</td>
    <td><input type="file" id="f1" /></td>
    <td><input type="button" value="aa" onclick="ff()" /></td>
    </tr>
    <tr>
    <td>商品颜色:</td>
    <td><input id="color" type="text" /></td>
    </tr>
    <tr>
    <td>商品尺码:</td>
    <td><input id="size" type="text" /></td>
    </tr>
    <tr>
    <td>商品价格:</td>
    <td><input id="price" type="text" /></td>
    </tr>
    <tr>
    <td><input id="Button1" type="button" value="添加" onclick="add()" /></td>
    <td></td>
    </tr>
    </table>

    <script>

    //上传文件
    var url = []; //图片路径
    function ff() {
    var formData = new FormData();
    var file = document.getElementById("f1").files[0];
    formData.append("fileInfo", file);
    $.ajax({
    url: "http://localhost:51518/api/Shop/UpLoad",
    type: "post",
    data: formData,
    contentType: false,//必须false才会自动加上正确的Content-Type
    processData: false,//必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
    success: function (data) {
    if (data.Code == 0) {
    alert(data.Msg);
    //保存图片路径
    url = (data.Url).split(";");
    }
    else {
    alert('上传失败!');
    }
    }
    })
    }

    //添加商品
    function add() {
    var obj = {
    GName: $("#name").val(),
    GImg: url[0],
    GColor: $("#color").val(),
    GSize: $("#size").val(),
    GPrice: $("#price").val()
    };
    $.ajax({
    url: "http://localhost:51518/api/Shop/AddGood",
    data: obj,
    type: "post",
    dataType: "json",
    success:
    function (d) {
    if (d > 0) {
    alert('添加成功!');
    location.href = "/Default/ShowGood";
    }
    else {
    alert('添加失败!');
    }
    }
    })
    }
    </script>

  • 相关阅读:
    3: Flink 运行命令 设置port
    4: docker 安装flink 1.14
    6: Docker Compose简单知识
    十二 docker 安装kafka
    十三 查看kafka版本
    2: Windows安装1.9.3 flink && first demo project
    5: win10 使用IDEA调试编译flink 1.14
    1: Windows上安装Flink
    Chrome 96 新功能
    js map遍历与promise一起使用会出现的问题,以及解决方案
  • 原文地址:https://www.cnblogs.com/CoreColor/p/13448772.html
Copyright © 2020-2023  润新知