分享

从剪贴板上传图片文件

 cathy001 2015-07-21
<script language="text/javascript">
    $("#myUEditor").onpaste = _onDragOver;
    /**
     * 粘贴事件触发
     */
    function _onPaste(ev) {
        if (ev && ev.clipboardData && ev.clipboardData.items) {
            var clipboardData = ev.clipboardData;
            var items = clipboardData.items;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (item.kind === "file" && item.type === "image/png") {
                    var imageFile = item.getAsFile();
                    //页面上显示需要上传的文件
                    _showUploadFile(imageFile);
                }
            }
        }
    }
    /**
     * 页面上显示需要上传的文件
     * @private
     */
    function _showUploadFile(file) {
        var reader = new FileReader();
        //判断文件类型 
        if (file.type.match(/image*/)) {
            reader.onload = function (e) {
                var formData = new FormData();
                formData.append("img", file);
                //上传文件到服务器
                return _uploadToServer(formData);
            };
            reader.readAsDataURL(file);
        } else {
            console.log("此" + file.name + "不是图片文件!");
        }
    }
    /**
     * 上传文件到服务器
     * @private
     */
    function _uploadToServer(formData) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/action/uploadimg", true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest', 'Content-Type', 'multipart/form-data;');
        xhr.send(formData);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) { //上传成功时,触发
                _upload_img_url = xhr.responseText; //获取服务器返回的最新图片url
            }
        };
    }
</script>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多