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了 剩下的方法自己找吧 我就不多说了

好了 如果觉得帮到你的话 点赞或留言都可以哦 有错欢迎指出。