|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <!DOCTYPE html>
- <%@ page contentType="text/html;charset=utf-8"%>
- <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
- <!--[if !IE]><!-->
- <html lang="en">
- <!--<![endif]-->
- <head>
- <%@ include file="/WEB-INF/jsp/assets.jsp" %>
- <script src="${rootUrl }js/tjlib/binXhr.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- });
- //var url="http://sample.wlj.com/sample/app/common/binapi";
- var url="${rootUrl}app/common/binapi";
- var myXhr=createBinXhr(url,
- {
- withCredentials:true,
- responseError:function(status){
- alert("http响应出错:"+status);
- }
- });
-
- function commSample(){
- var jsonObj={};
- jsonObj.name=document.querySelector("#name").value;
- jsonObj.age=document.querySelector("#age").value;
- myXhr.binAjax({
- serviceType:"COMMSAMPLE",
- json:jsonObj,
- beforeSend:function(xhr){
- xhr.setRequestHeader("binfile-auth","ccc");
- },
- success:function(jsonResult){
- document.getElementById("commSampleResult").textContent=JSON.stringify(jsonResult);
- },
- handleError:function(status,msg){
- alert(status+":"+msg);
- }
- });
- }
-
- function filePost(){
- if(afile.files.length==0){
- alert("请选择文件!");
- return false;
- }
- var sendFile=afile.files[0];
- var myForm = new FormData();
- myForm.append("filename","zfd_"+sendFile.name);
- myForm.append("binFile",sendFile);
- var xhr = new XMLHttpRequest();
- xhr.open("POST", url);
- xhr.responseType = 'blob';
- //xhr.withCredentials = true;
- xhr.send(myForm);
-
- xhr.onreadystatechange = function (){
- if ( xhr.readyState == 4 && xhr.status == 200 ) {
- var reader = new FileReader();
- reader.readAsText( xhr.response);
- reader.onload=function(event){
- alert(event.target.result);
- }
- } else {
- // log(xhr.readyState);
- }
- };
-
- }
-
-
-
- </script>
- <style type="text/css">
- .result{
- background: #333 none repeat scroll 0 0;
- border-radius: 5px;
- color: white;
- min-height: 100px;
- }
- </style>
- </head>
- <body >
- <div id="page-loader" class="fade in"><span class="spinner"></span></div>
- <!-- begin #page-container -->
- <div id="page-container" class="fade">
- <!-- begin #header -->
- <%@ include file="/WEB-INF/jsp/header.jsp" %>
- <!-- end #header -->
-
- <!-- begin #sidebar -->
- <%@ include file="/WEB-INF/jsp/sidebar.jsp" %>
- <!-- end #sidebar -->
-
- <!-- begin #content -->
- <div id="content" class="content">
- <ol class="breadcrumb pull-right">
- </ol>
- <!-- begin page-header -->
- <h1 class="page-header"></h1>
- <!-- end page-header -->
-
- <!-- begin row -->
- <div class="row">
- <div class="col-md-6 ">
- <div class="well">
- <div class="form-inline">
- <div class="form-group">
- <label for="name">姓名</label>
- <input type="text" class="form-control" id="name" name="name" value="东方不败">
- </div>
- <div class="form-group">
- <label for="age">年龄</label>
- <input type="text" class="form-control" id="age" name="age" value="88" size="5">
- </div>
- <button type="button" class="btn btn-success pull-right" onclick="commSample();">发送</button>
- </div>
- <h3>结果</h3>
- <p id="commSampleResult" class="result">
-
- </p>
- </div>
- </div>
- <div class="col-md-6 ">
- <div class="well">
- <div class="form-inline">
- <div class="form-group">
- <label for="afile">文件</label>
- <input type="file" class="form-control" id="afile" name="afile" >
- </div>
- <button type="button" class="btn btn-success pull-right" onclick="filePost();">发送</button>
- </div>
- <p><span>上传大小:</span><span id=loadprocess>0</span></p>
- <h3>结果</h3>
- <p id="binSampleResult" class="result">
-
- </p>
- </div>
- </div>
- </div>
- <!-- end row -->
- </div>
- <!-- end #content -->
-
-
- <!-- begin scroll to top btn -->
- <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
- <!-- end scroll to top btn -->
- </div>
- <!-- end page container -->
-
-
-
- </body>
- </html>
|