2. 程式人生 > >http上傳檔案和進度監控以及構造multipart/form-data請求

http上傳檔案和進度監控以及構造multipart/form-data請求

阿新 • • 發佈：2019-01-06

http上傳檔案

html程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>http</title>
    <link rel="stylesheet" href="">
    <script src="js/common.js"></script>
    <script
 
 src="js/http.js"></script>
</head>
<body>
<form action="upload" method="post" accept-charset="utf-8">
     <input type="file" data-uploadTo="http://www.baidu.com"></input>
</form>
</body>
</html>

js程式碼


//自用工具庫
var whenReady = (function(){
    var ready = false
 
;
    var funcs = [];//儲存函式的陣列
    function handler(e){
        if(ready) return;
        if(e.type === 'readystatechange' && document.readyState !== 'commplete'){
            return;
        }
        for(var i=0;i<funcs.length;i++){
              funcs[i].call(document);
        }
        //進行標記
 

        ready  = true;
        funcs = null;//置空
    }
    if(document.addEventListener){
         document.addEventListener('DOMContentLoaded', handler,false);
         document.addEventListener('readystatechange', handler,false);
         window.addEventListener('load',handler,false);
    }else{
        //相容IE等不支援addEventListener方法的瀏覽器
        document.attachEvent('onreadystatechange',handler);
        window.attachEvent('onload',handler);
    }
    return function isReady(f){

        if(ready){
             f.call(document);
        }else{
            funcs.push(f);
        }
    }
}());

whenReady(function(){
  var elts = document.getElementsByTagName('input');
  for (var i = 0; i < elts.length; i++) {
    var input=elts[i];
    if(input.type !=='file') continue;
    var url = input.getAttribute('data-uploadTo');
    if(!url) continue;
    input.addEventListener('change', function(){
      var file = this.files[0];
      if(!file) return;
      var xhr = new  XMLHttpRequest();
      xhr.open('POST',url);
      xhr.send(file);
    },false);
  }
  //postFormData('http://www.baidu.com');
  checkBrowserIsSupportProgressEvent();//檢測當前瀏覽器對http progress事件的支援情況！
});

構造multipart/form-data請求

//使用POST方法傳送multipart/form-data請求主題
function postFormData(url,data,callback){
  if(typeof FormData === 'undefined') throw new Error('FormData is not implemented!');
  var request = new XMLHttpRequest();
  request.open('POST',url);
  request.onreadystatechange = function(){
     if(request.readyState === 4 && callback){
           return callback(request);
     }
  }
  var formdata = new FormData();
  for(name in formdata){
    if(!formdata.hasOwnProperty(name)) continue;
    if(typeof formdata[name] ==='function') continue;
    formdata.append(name,formdata[name]);
  }
  //在mutipart請求主體中傳送名/值對 每隊都是請求的一部分 注意當傳入FormData 物件時 send()會自動設定Content-Type
  request.send(formdata);
}

http進度事件

並不是所有的瀏覽器都支援progress事件

//HTTP的進度事件
function checkBrowserIsSupportProgressEvent(){
  if('onprogress' in (new XMLHttpRequest())){
    alert('支援http進度事件！');
  }else{
    alert('對不起您的瀏覽器不支援http進度事件！請更換谷歌或者火狐瀏覽器！');
  }
}
request.onprogress=function(e){
  if(e.lengthComputable){
    progress.innerHTML = Math.round(100*e.loaded/e.total)+" % complete!";
  }
}

相關推薦

http上傳檔案和進度監控以及構造multipart/form-data請求

http上傳檔案 html程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

post請求上傳檔案和文字時http格式

服務端通常是根據請求頭（headers）中的 Content-Type 欄位來獲知請求中的訊息主體是用何種方式*編碼*，再對主體進行解析。所以說到 POST 提交資料方案，包含了 Content-Type 和訊息主體編碼方式兩部分。 application

ajax FormData上傳檔案和資料，上傳進度條顯示

http://www.jb51.net/article/114003.htm 一、基於input 方式formData上傳檔案和資料： <divclass="startleft describebox"> <labelclass="title">商

android http通過post上傳檔案和提交引數（通過拼裝協議）

HttpURLConnection conn = null; DataOutputStream outStream = null;try{           String BOUNDARY = "---------------------------7da2137580

linux 上傳檔案和下載檔案命令；centos通過Xshell上傳檔案至linux伺服器以及下載檔案到windows本地

上傳檔案我們經常會選擇在伺服器搭建ftp，用來實現檔案的上傳和下載，同時，我們也應該知道用xshell也可實現檔案的上傳下載，做筆記以備忘。 1，執行yum  install lrzsz 安裝lrzsz工具包，已安裝的跳過 2，安裝完會提示你是否已完成，輸入y，回車

django 基於form表單上傳檔案和基於ajax上傳檔案

一、基於form表單上傳檔案 1、html裡是有一個input type="file" 和 ‘submit’的標籤 2、vies.py def fileupload(request): if request.method == 'POST': print(request.P

HTML 上傳檔案、過濾型別以及顯示大小

HTML： <h>檔案上傳只支援.xlsx格式</h> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file"

Extjs 使用fileupload外掛上傳檔案 帶進度條顯示

一.首先我們看看官方給出的外掛的解釋： 一個檔案上傳表單項具有自定義的樣式，並且可以控制按鈕的文字和 像文字表單的空文字類似的其他特性。 它使用一個隱藏的檔案輸入元素，並在使用者選擇檔案後 在form提交的同時執行實際的檔案上傳。 因為沒有安全的跨瀏覽器以程式設計的方式對file表單項設值的方式,

關於post請求上傳檔案和其它資料

1，背景： 在網上搜索這個問題得到的答案只有上傳檔案的單一上傳方式，並沒有說如果還需要其它請求引數的時候該如何處理。 2，解決方案： 通過append來加入其它請求引數，在上傳的時候還是用data:fromlsdata來上傳 3,相關程式碼： handleUp

基於springMVC+AJAX+bootstraptable實現上傳檔案和客戶端分頁

1 首先看一下上傳表格程式碼，主要程式碼如下： <form method="post" enctype="multipart/form-data" id="orderform"> <div class="col-md-6 col-sm-12"&

使用form表單同時實現上傳檔案和提交文字資料

使用form表單同時實現上傳檔案和提交文字資料,此示例中在後臺將檔案上傳到阿里的oss儲存伺服器中 申請oss相關賬號： endpoint = "http://oss-cn-qingdao.aliyuncs.com"; accessKeyId = "key"; accessKeySecret = "secr

Java ftp 上傳檔案和下載檔案

今天同事問我一個ftp 上傳檔案和下載檔案功能應該怎麼做，當時有點懵逼，畢竟我也是第一次，然後裝了個逼，在網上找了一段程式碼發給同事，叫他除錯一下。結果悲劇了，執行不通過。（裝逼失敗） 我找的文章連結：http://blog.csdn.net/yucaifu1989/art

Flask-上傳檔案和訪問上傳的檔案

 1.1.上傳檔案和訪問上傳的檔案 upload_file_demo.py from flask import Flask,request,render_template import os from werkzeug.utils import secure_filenam

ajax實現上傳檔案和form表單上傳檔案的區別

在使用form表單的時候,一旦點選提交觸發submit事件，一般會使得頁面跳轉，頁面間的跳轉等行為的控制權往往在後端，後端會控制頁面的跳轉及資料傳遞，但是在某些時候不希望頁面跳轉，或者說想要將控制權放在前端，通過js來操作頁面的跳轉或者資料變化。 一般這種非同步的操作，我們

ajax 上傳檔案和form

1、檔案html，點選顯示 <div class="col-md-2"> <a href="javascript:void(0);" class="thumbnail">

用struts2實現上傳檔案和轉化檔案為html

action public class shangchuanAction extends ActionSupport{ public File some; public String someFileName; public File getSome() { return so

Java客戶端利用httpclient來同時上傳檔案和其他字串引數

1.客戶端程式碼如下： import java.io.File; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.nio.charse

Retrofit+RxJava上傳檔案和頭像

compile 'io.reactivex.rxjava2:rxjava:2.0.1'    compile 'io.reactivex.rxjava2:rxandroid:2.0.1'    compile 'com.squareup.retrofit2:retrofit

HTTP上傳檔案至伺服器

本人最近開發MFC專案需要利用HTTP協議，上傳檔案至伺服器，需要以二進位制傳輸，Content-Type型別為: multipart/form-data，注意需要定義相關邊界開始和結束 利用WinInt開發包HTTP封裝  //HTTP服務  CHttpConnecti

github上傳檔案和編寫.md格式檔案

一、利用git bash上傳檔案到github上和克隆檔案到本地其實我們在github中建立完倉庫就可以直接上傳檔案了第一步：第二步：第三步：我之所以用git上傳的原因是因為有的時候網路不好，這種方法上傳不上去，其實git的功能很強大，只是目前我還用不到，也有人說用這個沒辦法