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

所属分类:输入-拖和放

 6889  13  查看评论 (3)
可拖拽图片文本框(类似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拖动改变数值大小

使用鼠标到任何输入字段中拖动,可改变其值。他们有最小和最大值。
  拖和放
 4570  12

jQuery拖放插件Gridly

Gridly是一个JQuery插件,它能够拖动,删除和调整一个网格的大小。
  拖和放
 48252  91

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 25038  203

jquery 拖动复制

jquery拖动div复制到表格
  拖和放
 10775  102

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    花∮饰∮雪 0
    2016/2/23 13:02:41
    IE不支持推拽图片呀,楼主 回复
    万平 0
    2015/11/19 8:11:37

    很好用。支持jq

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

        很好用。支持jq

    回复
取消回复