JQ+js無插件上傳文件

今天給大家分享一個js無插件的上傳文件的方法。話不多說 上碼···：

<input type="file" name="fileup" id="fileup" onchange="filechage(this)" accept="image/png, image/jpeg, image/gif, image/jpg" />

onchangge:監聽選擇的文件
accept：限定選擇的文件類型 我這裏是上傳圖片
好 接下來就是js了：

function filechage(thisfile) {
            var file = thisfile.files[0];//得到選擇的文件
            if (!!file) {                
                var fr = new FileReader();//第一次用這個神奇的對象 下面有詳細介紹連接
                fr.onloadend = function () {
                    var res = fr.result;
                    var param = "{ 'imgfile':'" + res + "','imgname':'" + file.name + "'}";
                    $.ajax({
                        type: "post",
                        async: false,
                        contentType: "application/json; charset=utf-8",
                        data: param,
                        url:  "http://192.168.0.1:Service/BusinessManageService.asmx/QydzfjUpload",
                        dataType: 'json',
                        success: function (msg) {
                            msg = JSON.parse(msg.d);
                            alert(msg.msg);
                        },
                        error: function (e) {
                            alert('上傳失敗!請重試');
                        }
                    });                  
                }
                fr.onerror = function () {                   
                   alert('上傳失敗!請重試');
                }
                fr.readAsDataURL(file); //base64讀取 事件必須聲明在讀取之前否則不會觸發
            }
        }

以上是上傳文件的核心js：
關於FileReader 查看詳細
FileReader 大概介紹一下 ：
首先它是異步操作，filereader在調用readAsDataURL時就是異步操作了，它有多種讀取方式，我使用的是將圖片在瀏覽器端讀取爲base64的編碼字符串，然後通過ajax將該字符串傳到後臺，我後臺是C#的，所以是用webserver來接收，後臺服務方法只需要提供一個ajax同名的參數接收即可，例：

QydzfjUpload(string imgfile,string imgname){}

imgfile 即爲前端傳遞過來的圖片的base64編碼 類似：data:image/png;base64,　iVBORw······
這個字符串是可以直接賦值給 img的src屬性的 ，可以正常的顯示成圖片 非常方便
如果後臺需要Image類型則要轉一下類型：
byte[] bytearr=Convert.ToBase64String(imgfile);//先將字符串轉成byte字節數組
轉成byte[]後 就可以很方便的轉成Image了 剩下的方法自己找吧 我就不多說了

好了 如果覺得幫到你的話 點贊或留言都可以哦 有錯歡迎指出。