当前位置 : 主页 > 网络编程 > JavaScript >

HTML5新的文件上传功能:new FileReader 和new FormData

来源:互联网 收集:自由互联 发布时间:2021-07-03
用H5的新功能属性:FileReader、FormData实现即时上传图片。 参考链接: http://blog.csdn.net/jackfrued/article/details/8967667 http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html https://www.douban.com/note/33698
用H5的新功能属性:FileReader、 FormData实现即时上传图片。
参考链接:
http://blog.csdn.net/jackfrued/article/details/8967667

http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

https://www.douban.com/note/336989176/

1. [代码][JavaScript]代码    

html代码:
<form id="imageForm" method="post" enctype="multipart/form-data">
            <ol class="add_photo">
                <li id="clickMyImg" onclick="$('#myImg').click();" class="disbox-center add_icon" style="position: relative; overflow: hidden; transform-origin: 0px 0px 0px;opacity: 1; transform: scale(1, 1);">+</li>
            </ol>
            <input type="file" accept="image/*" name="photo" id="myImg" style="display: none;">
        </form>  
<ol class="showPhotos" ></ol>
script代码:

 var showImg=function(data) { 
        $(".showPhotos").append('<li><img src="' + data + '" /></li>');  
    } 

    $('#myImg').live('change', function () { 
        $("#clickMyImg").html('<img width="75px" height="75px" src="../images/wap2/loading.gif" />'); 

        var oFile=this.files[0];   
        var oReader = new FileReader();
            oReader.onload = function(e){
                var sBase64 = e.target.result;
                // 部分Android下base64字符串格式不完整
                if(window.gIsAndroid && sBase64.indexOf("data:image/") != 0){
                    var sMime = sName.split(".").pop().toLowerCase();
                    sBase64 = sBase64.replace("base64,", "image/" + sMime + ";base64,");
                }  
                showImg(sBase64);

                var oData = new FormData(document.getElementById("imageForm")); 
                $.ajax({
                    type:'POST',
                    url : serverUrl.domain+'user/uploadphoto', 
                    data: oData, 
                    dataType:'json', 
                    processData: false,
                    contentType: false,
                    success : function(data) {
                        $("#clickMyImg").html('+'); 
                        messageShowHide();
                    },
                    error : function(data) { 
                        $('.message_tip').html('上传头像出错!');
                        messageShowHide(); 
                    }
                }); 
                sBase64 = null;
            } 
            oReader.readAsDataURL(oFile);  
    }); 
网友评论