美文网首页
头像(图片上传)FileReader 方法

头像(图片上传)FileReader 方法

作者: Gopherzhang | 来源:发表于2017-07-17 15:19 被阅读82次

    图片上传到服务器方法

    代码如下:

    HTML :

    <a href="#">
            <div class="box-two">
                    <div class="box-two-text">
                        <span style="color: black; font-size: 16px; padding: 30px 20px 30px 20px;">头像</span>
                    </div>
                    <div style="float: left;width: 60%;z-index: 999;position: fixed;width: 100%;">
                        <form action="admin/NewsManager/UpdateImgBy80" method="post">
                            <input style="background: transparent;opacity: 0;height: 80px;width: 100%;" type="file" id="fileUpload" name="fileTrans" multiple="true" value="上传图片" />
                        </form>
                    </div>
                    <div class="pic">
                        <div id="userImg" style="width: 45px;height: 45px;border-radius: 20px;margin-right: 10px;">
                            ![](images/gwclogo.png)
                        </div>
                        <!--![](img/ziliao-xiangyou.png)-->
                    </div>
            </div>
        </a>
    

    js 代码:

    $("#fileUpload").on('change', function() {
    
                    if(typeof(FileReader) != "undefined") {
    
                        var image_holder = $("#userImg");
                        image_holder.empty();
    
                        var reader = new FileReader();  //引入方法名。
                        reader.onload = function(e) {
    
                            $("<img />", { //创建img 然后追加进去
                                "src": e.target.result, //target中的result属性的值,就是该文件的base64数据
                                "style": "width:45px;height:45px;border-radius: 45px;",
                                "class": "thumb-image",
                                "id": "sc-img"
                            }).appendTo(image_holder);
    
                            var ar = new Array();
                            var ee = e.target.result;
                            var data = ee.substr(ee.indexOf('base64,') + 7); // 16+7=23
    
                            ar.InterfaceAddress = "这里接入后台提供的接口代码名";
                            ar.Pic = data; //传入照片流。
                            ar.username = 999;
                            ar.id = localStorage.getItem("UserId");
                            ar.fileName = 'userHead';
                            ar.tm = '1';
                            ar.Handshake_Time = CurentTime('-', true);
                            aes(ar, "endHeadpic");
                            console.log(ar);
                            //以上ar 数组 套用封装好的代码转换成json数组 和 数据,再用 ajax  post到后台返回 rs。
        
    
                        }
    
                        image_holder.show();
                        reader.readAsDataURL($(this)[0].files[0]); //将文件读取为本地url 通过readAsDataURL读取数据成功后,就会触发load事件
    
                    } else {
                        alert("你的浏览器不支持FileReader.");
                    }
    
                });
                
                function endHeadpic(rs) { //关于ajax 已经封装成JS文件 我们公司可直接这样套用传入后台数据中。
                    
                    console.log(rs);
                    
                }
    
    以上就是传入我们后台服务器的流程代码。

    相关文章

      网友评论

          本文标题:头像(图片上传)FileReader 方法

          本文链接:https://www.haomeiwen.com/subject/hgldattx.html