百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文
topjui(easyui) filebox多图上传(easyui 文件上传)

topjui(easyui) filebox多图上传(easyui 文件上传)

  • 网站名称:topjui(easyui) filebox多图上传(easyui 文件上传)
  • 网站分类:技术文章
  • 收录时间:2025-07-16 15:40
  • 网站地址:

进入网站

“topjui(easyui) filebox多图上传(easyui 文件上传)” 网站介绍

topjui是在easyui的基础上换了层皮肤,两者名字不一样,功能相同。上传文件有uploadbox,但是只能单图上传,filebox可以多图上传,但是不用form表单提交,很多功能需要自己做。

html:

<input type="hidden" name="img_str" id="img_str">
<input data-toggle="topjui-filebox"  id="image_data" data-options="buttonText:'多图上传',accept:'images',multiple:true,onChange:fileChange">

script:

function fileChange(nv,ov){
        console.log('fileChange',nv,ov);
        let file_1=$("#image_data").iFilebox('files');
        var formData = new FormData();
        for (var i = 0; i < file_1.length; i++) {
            formData.append('Filedata'+i, file_1[i]);//注意:默认的文件数据名为“Filedata”
        }
        console.log('file_1',file_1);
        $.ajax({
            url: "uploads",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            dataType:'json',
            success: function(data) {
                if(data.statusCode==200){
                    var invoice_img=$("#invoice_img").val();
                    invoice_img+=invoice_img?','+data.url_base:data.url_base;
                    $("#img_str").val(invoice_img);
                    $("#image_data").iTextbox("setValue",invoice_img);
                }else{
                    $.iMessager.alert('提示',data.message);
                }
            },
            error: function(data) {
                $.iMessager.alert('提示',data.message);
            }
        });
    }