• 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>

  • 相关阅读:
    Thymeleaf 用法
    如何使用FormData上传压缩裁剪后的图片Blob对象
    video播放视频以及相关事件
    将表单序列化为json对象
    滑动到底部自动加载下一页内容,手机H5页面
    获取URL参数
    关于循环往集合添加元素,而导致的元素覆盖问题
    SpringMVC传递数组参数
    SQL查询语句
    jQuery DOM节点操作
  • 原文地址:https://www.cnblogs.com/CoreColor/p/13448772.html
Copyright © 2020-2023  润新知