java ajax文件上传

       
<div class="span2" style="width:230px;" id="percentage">
                                            
                                                

<span class="u-btn u-btn-success fileinput-button" style="background-color:#4D90FE;border-

color:#4D90FE;"> <i
                                                    

class="u-icon cus-add"></i> <span>添加文件</span>
                                                    

<input id="Filedata" type="file"
                                                    

name="Filedata" data-url="${path}/b/reg/userResourceUpload.html" οnchange="progress();">
                                                  <progress id="progressBar" value="0"

max="100"> </progress>
                                                    
                                                

</span>
                                            </div>
                                            <div

class="span2">
                                                

<a  class="btn blue"   οnclick="UpladFile()">确认上传</a>
                                            </div>

<script type="text/javascript">
function UpladFile() {
    
        var fileObj = document.getElementById("Filedata").files[0]; // 获取文件对象

        var FileController = "${path}/b/reg/userResourceUpload.html";                    // 接收

上传文件的后台地址
        if(fileObj==null){
            return  alert("请选择文件");
        }
        var progressBar = document.getElementById("progressBar");
        if(progressBar.value!=0){
            return alert("已经上传过");
        }
        // FormData 对象
        var form = new FormData();

        form.append("type", "${regMap.bizType}");
        form.append("busOrderId", "${regMap.bizId}");   
        form.append("orderId", "${regMap.id}");   // 可以增加表单数据

        form.append("Filedata", fileObj);                           // 文件对象


        // XMLHttpRequest 对象

        var xhr = new XMLHttpRequest();

        xhr.open("post", FileController, true);

        xhr.onload = function () {

            alert("上传完成!");

        };
        xhr.upload.addEventListener("progress", progressFunction, false);
        xhr.send(form);


    }
    
    
     function progressFunction(evt) {

         var progressBar = document.getElementById("progressBar");

         var percentageDiv = document.getElementById("percentage");

         if (evt.lengthComputable) {

             progressBar.max = evt.total;

             progressBar.value = evt.loaded;

            // percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

         }

     }  
    
     function progress() {
         var progressBar = document.getElementById("progressBar");
         progressBar.value="0";

     }  

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值