商品SKU属性添加、上传图片、生成列表并生成json传给后台（支持IE8、谷歌、火狐等主流浏览器）

时间：2024-11-15 10:36:52
不多说，先看效果图




首先声明sku属性生成table是百度的，不知道出处，如有冒犯请联系我删除。

首先是最顶部三级联动，很简单的，百度也有插件，博主自己jqurey手动写的，样式不太好看。。

三级联动点击第三列时使用ajax请求获取当前类目下应该有的sku属性，然后根据后台返回数据添加sku属性

当点击CheckBox时判断是否点击颜色，然后添加到颜色属性图后面，并添加一个上传的input，然后再根据点击了多少个生成表格并合并单元格。

表格生成时可以添加自己想添加的参数，比如data-id等一系列参数，用于最后生成json。

说下上传图片这里用的插件是，下面上的方法及引用的JS；
JS部分： 
<script type="text/javascript" src="js/jquery-1.12."></script>
<script src="js/add_img/"></script>
<script src="js/add_img/"></script>
<script src="js/add_img/"></script>
html部分： 
<input class="opacity0 add_img" id="addImg" type="file" name="file" multiple/>
JS方法： 
$("#addImg").fileupload({
    url:BaseUrl+"file/upload",//文件上传地址，当然也可以直接写在input的data-url属性内
    type:'post',
    contentType: 'text/html',
    formData:{},//如果需要额外添加参数可以在这里添加
    done:function(e,result){
        //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
        //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
        //返回的数据在中，假设我们服务器返回了一个json对象
        console.log(JSON.stringify(result.result));
    }
})
只需要以上内容，便可穿给后台，非base64，支持文件上传、视频音频等、兼容IE8.

相关文章