可拖拽图片文本框(类似QQ发送消息框)

所属分类:输入-拖和放

 30104  304  查看评论 (5)
分享到微信朋友圈
X
可拖拽图片文本框(类似QQ发送消息框) ie兼容9
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv=content-type>
    <title>Test</title>
    <style type="text/css">
        .photoUpload{
            border: 10px dashed #808080;
            width: 800px;
            height: 300px;
            float: left;
            padding: 10px;
        }
        .photoUpload img{
            margin-left: 10px;
        }
        .dashboard_target_box.over {
            border:3px dashed #000;
            background:#ffa
        }
    </style>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/multiple-textarea.js"></script>
</head>
<body>
<div class="photoUpload dashboard_target_box" contenteditable="true" id="photoUploadId"></div>
<div ><input id="fileInputId" type="file" multiple="multiple"></div>
<script type="text/javascript">
    $('.photoUpload').createMultiple({
        fileContainer:'photoUploadId',
        inputfile:'fileInputId',
        height:50,
        width:50
    })
</script>
</body>
</html>
/***
 * author:YuHongDa
 * date:2015-08-19
 * div contenteditable+input.file 实现拖拽传送文件(暂时支持单个文件拖拽,多个待实现)
 * 此demo未考虑浏览器兼容性,测试过Chrome和FF
 * @defaults
 *  fileContainer:存放文件容器Id
 *  height:缩略图高度
 *  width:缩略图宽度
 *  inputfile:上传文件组件的ID,
 *  filesize:上传文件大小
 *  fileType:上传文件分类 1:图片  2:其他文件(暂未实现) (其他待实现)
 *  photofiles:上传图片后缀名,此属性与fileType共同使用,fileType为1时生效,其他时可忽略
 *  otherfiles:其他文件后缀名,此属性与fileType共同使用,fileType为2时生效,其他时可忽略
 *
 *
 */
(function ($, doc, undefined) {
    $.fn.createMultiple = function (params) {
        var defaults = {
            fileContainer: '',
            height: 20,
            width: 20,
            inputfile: '',
            filesize: 200,
            filetype: 1,
            photofiles: ['png'],
            otherfiles: []

        };
        var options = $.extend(defaults, params);
        if (options.fileContainer == "") {
            throw  new Error("The style is Empty!");
        }
        if (options.inputfile == "") {
            throw new Error("The inputFile Id is Empty!");
        }
        if (typeof options.filetype != "number") {
            throw new Error("The file type must be Number And can't be empty!");
        }
        var fileContainer = $('#' + options.fileContainer), inputFile = doc.getElementById(options.inputfile), fileTempLate = "<img src={0} height={1} width={2}>",
            emum = {
                photo: 1,
                other: 2
            };
        /***type file is Photos***/
        var showPhoto = function () {
                if (inputFile.files) {
                    appendImage(inputFile.files);
                }
            },
            /***types file is others***/
            showOther = function () {
                alert("to be continued!")
            },
            appendImage = function (files) {
                var sizeStr="",typeStr="";
                for (var i = 0, len = files.length; i < len; i++) {
                    if (files[i].size / 1000 > options.filesize) {
                        sizeStr+=files[i].name;
                        sizeStr+="、";
                        continue;
                    }
                    if (options.photofiles.indexOf(files[i].name.substring(files[i].name.lastIndexOf('.') + 1, files[i].name.length)) == -1) {
                        typeStr+=files[i].name;
                        typeStr+="、";
                        continue;
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(files[i]);
                    reader.onload = function (e) {
                        var img = this.result;
                        fileContainer.html(fileContainer.html() + String.imgFormat(fileTempLate, img, options.height, options.width));
                    }
                }
                if(sizeStr){
                    alert(sizeStr+" are too large,Must be smaller than ‘" + options.filesize + "KB’");
                }
                if(typeStr){
                    alert('Does is not support this kind of type:'+typeStr);
                }
            }

        $('#' + options.inputfile).bind('change', function () {
            switch (options.filetype) {
                case emum.photo:
                    showPhoto();
                    break;
                case emum.other:
                    break;
                    showOther();
                default:
                    alert("The fileType is undefined!");
            }
        });
        $(document).on({
            dragleave: function (e) {
                e.preventDefault();
                fileContainer.removeClass('over');
            },
            drop: function (e) {
                e.preventDefault();
                fileContainer.removeClass('over');
            },
            dragenter: function (e) {
                e.preventDefault();
                fileContainer.addClass('over');
            },
            dragover: function (e) {
                e.preventDefault();
                fileContainer.addClass('over');
            }
        });
        doc.getElementById(options.fileContainer).addEventListener('drop', function (e) {
            e.preventDefault();
            if (e.dataTransfer.files) {
                appendImage(e.dataTransfer.files);
            }

        }, false);
    }
})(window.jQuery, window.document);
String.imgFormat = function (str) {
    for (var i = 1; i < arguments.length; i++) {
        str = str.replace(new RegExp("\\{" + (i - 1) + "\\}", "g"), arguments[i] != undefined ? arguments[i] : "");
    }
    return str;
};


相关插件-拖和放

jQuery拖动滑块选择数字插件sider.jquery.js

通过拖动滑块快速输入数值,并可以设置常用的数值快速选择
  拖和放
 27727  313

拖动排序插件

实现在两个div中,互相自由的拖动,并且排序
  拖和放
 51057  484

jQuery移动端滑动标尺

移动端卡尺,滑动标尺,标不动
  拖和放
 24771  319

拖放交互的想法

在UI中拖放交互的一些想法,这个想法是显示一个可拖拽的区域,代表一个元素被拖拽后的某些动作。
  拖和放
 26136  345

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    90李李李小姐 0
    2018/4/25 11:54:05
    大神能不能把这个功能上加上图片放大缩小和保存png格式?求资源 回复
    花∮饰∮雪 0
    2016/2/23 13:02:41
    IE不支持推拽图片呀,楼主 回复
    万平 0
    2015/11/19 8:11:37

    很好用。支持jq

        易露清0
        2015/12/1 9:12:22

        很好用。支持jq

        wintersweet*20
        2018/5/21 14:16:28
        很好用。支持jq
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复