Linux系統安裝MySQL（2020最新最詳細）

阿新 • • 發佈：2020-10-23

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest上傳檔案</title>
<script type="text/javascript">
//<![CDATA[
var xhr;
var ot;
var oloaded;
var LCX = {
        alert: function(msg){
            console.log(msg);
            // alert(msg);
        }
};

 
function UpladFile() {
    var fileObj = document.getElementById("file").files[0];    // js 獲取檔案物件
    UpladFun(fileObj);
}

//上傳檔案方法
function UpladFun(fileObj) {
    var url = "/resource/rest/service/export/channel2xml";    // 接收上傳檔案的後臺地址 
    
    url = "/resource/rest/service/export/channel2xml";
    url = "/resource/rest/service/image/ueditorupload 
";
    url = "/resource/rest/service/export/ueditorupload";

    LCX.alert(url);
    LCX.alert(fileObj);
    LCX.alert(fileObj.name || ('blob.' + fileObj.type.substr('image/'.length)));
    
    var form = new FormData();    // FormData 物件
    form.append("upfile", fileObj, fileObj.name || ('blob.' + fileObj.type.substr( 
'image/'.length)));    // 檔案物件
    
    xhr = new XMLHttpRequest();        //XMLHttpRequest 物件
    xhr.open("post", url, true);    //post方式，url為伺服器請求地址，true 該引數規定請求是否非同步處理。
    xhr.onload = uploadComplete;    //請求完成
    xhr.onerror = uploadFailed;        //請求失敗
    xhr.upload.onprogress = progressFunction;    //【上傳進度呼叫方法實現】
    xhr.upload.onloadstart = function() {        //上傳開始執行方法
        ot = new Date().getTime();                //設定上傳開始時間
        oloaded = 0;    //設定上傳開始時，以上傳的檔案大小為0
    };
    xhr.send(form);        //開始上傳，傳送form資料
}
//上傳進度實現方法，上傳過程中會頻繁呼叫該方法
function progressFunction(evt) {
    
     var progressBar = document.getElementById("progressBar");
     var percentageDiv = document.getElementById("percentage");
     // event.total是需要傳輸的總位元組，event.loaded是已經傳輸的位元組。如果event.lengthComputable不為真，則event.total等於0
     if (evt.lengthComputable) {
         progressBar.max = evt.total;
         progressBar.value = evt.loaded;
         percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
     }
    
    var time = document.getElementById("time");
    var nt = new Date().getTime();    //獲取當前時間
    var pertime = (nt-ot) / 1000;    //計算出上次呼叫該方法時到現在的時間差，單位為s
    ot = new Date().getTime();        //重新賦值時間，用於下次計算
    
    var perload = evt.loaded - oloaded;    //計算該分段上傳的檔案大小，單位b       
    oloaded = evt.loaded;    //重新賦值已上傳檔案大小，用以下次計算

    //上傳速度計算
    var speed = perload / pertime;    //單位b/s
    var bspeed = speed;
    var units = 'b/s';    //單位名稱
    if (speed/1024 > 1) {
        speed = speed/1024;
        units = 'k/s';
    }
    if (speed/1024 > 1) {
        speed = speed/1024;
        units = 'M/s';
    }
    speed = speed.toFixed(1);
    //剩餘時間
    var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
    time.innerHTML = '，速度：'+speed+units+'，剩餘時間：'+resttime+'s';
    if(bspeed==0)
        time.innerHTML = '上傳已取消';
}
//上傳成功響應
function uploadComplete(evt) {
    //服務斷接收完檔案返回的結果
     LCX.alert(evt.target.responseText);
    LCX.alert("上傳成功！");
}
//上傳失敗
function uploadFailed(evt) {
    LCX.alert(evt.target.responseText);
    LCX.alert("上傳失敗！");
}
//取消上傳
function cancleUploadFile(){
    xhr.abort();
}
//]]>
</script>
</head>
<body>
    <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
    <span id="percentage"></span><span id="time"></span>
    <br /><br />
    <input type="file" id="file" name="myfile" />
    <input type="button" onclick="UpladFile()" value="上傳" />
    <input type="button" onclick="cancleUploadFile()" value="取消" />
    
    <br/><hr/><br/>
    
    <input type="text" id="testInput" name="myfile" />
</body>

<script>
//<![CDATA[
document.getElementById('testInput').addEventListener( 'paste', function( e ){
    // 新增到事件物件中的訪問系統剪貼簿的介面
   var clipboardData = e.clipboardData,
       i = 0,
       items, item, types;

   if( clipboardData ){
       items = clipboardData.items;
       if( !items ){
           return;
       }
       item = items[0];
       // 儲存在剪貼簿中的資料型別
       types = clipboardData.types || [];
       for( ; i < types.length; i++ ){
           if( types[i] === 'Files' ){
               item = items[i];
               break;
           }
       }
       // 判斷是否為圖片資料
       if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
           UpladFun(item.getAsFile());
           LCX.alert(item.type)
           //alert('blob.' + item.type.substr('image/'.length));
       }
   }
});
//]]>
</script>

</html>

檔案上傳：

截圖上傳（截圖上傳的檔名都是image.png）：

後臺顯示檔案的名稱時，中文名稱是亂碼，不曉得該如何處理了，試了幾種編碼格式的轉換，都不行

filename="��������������������� ������������.jpg"

            try {
                String str1 = unicodeToUtf8(str);
                String str2 = new String(str.getBytes(), "UTF-8");
                String str3 = new String(str.getBytes("iso8859-1"), "GBK");
                String str4 = new String(str.getBytes("iso8859-1"), "UTF-8");
                String str5 = new String(str.getBytes("GBK"), "UTF-8");
                System.out.println(str4);
//                GBK、UTF-8 都不對，依然亂碼 iso8859-1
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }