文件/图片上传汇总

 

一、FormData上传

<div class="exportOrder">
    <p class="u-remark red">下载的订单/宝贝报表csv文件请勿修改，直接上传即可，淘宝订单报表和宝贝报表需要同时上传</p>
    <ul class="item-container">
        <li class="u-item">
            <p>订单报表文件(ImportOrderList):</p>
            <div class="button-container">
                <input id="orderData" name="orderData" type="file" accept=".csv" />
                <button class="layui-btn layui-btn-normal btn-file">选择文件</button>
                <span class="u-remark">csv格式</span>
                <span class="u-remark red name">未选择任何文件</span>
            </div>
        </li>
        <li class="u-item">
            <p>宝贝报表文件(ImportOrderDetailList):</p>
            <div class="button-container">
                <input id="itemData" name="itemData" type="file" accept=".csv" />
                <button class="layui-btn layui-btn-normal btn-file">选择文件</button>
                <span class="u-remark">csv格式</span>
                <span class="u-remark red name">未选择任何文件</span>
            </div>
        </li>
    </ul>
<div class="layui-progress layui-progress-big mb20" style="display:none;">
    <div class="layui-progress-bar layui-bg-green"  id="son">0%</div>
</div>
    <div class="button-container inportBtn">
        <button class="layui-btn layui-btn-normal btn-export">导入</button>

        
    </div>
</div>

<script>
  
    $("input[type='file']").on("change", function (e) {
        var file = $(this).get(0).files[0];
        $(this).siblings(".name").text(file.name).removeClass("red").addClass("underline");
    })


    function onprogress(evt) {
        var loaded = evt.loaded;                  //已经上传大小情况
        var tot = evt.total;                      //附件总大小
        var per = Math.floor(100 * loaded / tot);      //已经上传的百分比
        $("#son").text(per + "%");
        $("#son").css("width", per + "%");
        if (per == 100) {
            createLoading("", "正在导入订单");
            timeOutLoading(60000);
        }
    }

    $(".btn-export").click(function () {
        var fileA = $("#orderData").get(0).files[0];
        var fileB = $("#itemData").get(0).files[0];
        if (!fileA) {
            alert("请上传订单报表文件");
            return;
        } 
        if (!fileB) {
            alert("请上传宝贝报表文件");
            return;
        } 
        $(".layui-progress").show();
        $(".inportBtn").hide();
        var formData = new FormData();
        formData.append('file[]', $("#orderData").get(0).files[0]);
        formData.append('file[]', $("#itemData").get(0).files[0]);
        $.ajax({
            type: "POST",
            url: "/Order/UploadFile",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                if (onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress", onprogress, false);
                    return xhr;
                }
            },
            success: function (res) {
                $("#orderData").val('').nextAll("span.name").text('未选择任何文件').removeClass("underline").addClass("red");
                $("#itemData").val('').nextAll("span.name").text('未选择任何文件').removeClass("underline").addClass("red");
                clearTimeout(timer);
                closeLoading();
                var alertIcon = res.code == 0 ? 1 : 5;
                zhuluCommon.showMsg(res.message, alertIcon,window);
                $("#son").text("0%");
                $("#son").css("width", "0%");
                $(".layui-progress").hide();
                $(".inportBtn").show();
            },
        });
    });

  

</script>

二：FileReader上传,可设置预览

 <input type="file" accept="image/*">
 <img src="" id="preview"/>
 

 

$('input.file')[0].onchange = function () {
    var file = this.files[0];
    var imgSize = file.size;
    if (imgSize > 1048576) {
        alert('上传的图片大于1M,请重新选择');
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
　　 $("#preview").attr("src",this.result);
    zhuluCommon.postData("/Api/V1.0/AutoReply/UploadImage", {imageBase64Str: this.result}, function (res) { }) } 
}