Maison > Article > interface Web > Cas classique HTML5/CSS3 - glisser-déposer pour télécharger des images sans plug-in (2)

Cas classique HTML5/CSS3 - glisser-déposer pour télécharger des images sans plug-in (2)

黄舟original: 2017-03-09 16:38:292088parcourir

L'article précédent a implémenté l'ensemble HTML et CSS de ce projet :

Cas HTML5/CSS3 classique - glisser-déposer pour télécharger des images sans plug-ins (1)

Ce blog est directement basé sur le précédent L'effet final est :

<.>

Rendu 1 :

Rendu 2 :

D'accord, permettez-moi de poster la photo deux fois pour que tout le monde puisse voir l'effet~

Vous pouvez voir Le html du li qui produit nos images est en fait assez compliqué, j'ai donc apporté quelques modifications au document html :

<span style="font-size:12px;"><body>

<p id="uploadBox">
</p>

<p id="template" class="hidden">
    <li>
        <img src=""/>
        <span class="progress"></span>
        <span class="percentage"></span>
    </li>
</p>
</body></span>

Vous pouvez voir que j'ai écrit l'affichage de li indépendamment dans un modèle p#. La valeur par défaut est masquée. Quels sont les avantages de cette opération ? Pour éviter une grande quantité de code pour créer des éléments et attribuer des attributs en js à chaque fois que nous téléchargeons un fichier, celui-ci est généralement conçu pour générer des éléments HTML plus complexes. Il est recommandé d'utiliser cette méthode, qui peut simplifier le code et également faciliter le travail. maintenance ultérieure de notre code.

Code Js :

<span style="font-size:12px;">/**
 * User: zhy
 * Date: 14-6-16
 * Time: 下午11:06
 */
var ZhangHongyang = {};
ZhangHongyang.html5upload = (function ()
{
    var _ID_UPLOAD_BOX = "uploadBox";
    var _CLASS_PROGRESS = "progress";
    var _CLASS_PERCENTAGE = "percentage";

    var _tip_no_drag = "将文件拖拽至此区域，即可上传！";
    var _tip_drag_over = "释放鼠标立即上传！";

    var _uploadEle = null;

    /**
     * 初始化对象与事件
     * @private
     */
    function _init()
    {
        _uploadEle = document.getElementById(_ID_UPLOAD_BOX);
        _uploadEle.ondragenter = _onDragEnter;
        _uploadEle.ondragover = _onDragOver;
        _uploadEle.ondragleave = _onDragLeave;
        _uploadEle.ondrop = _onDrop;
        _setStatusNoDrag();

    };


    /**
     * 正在拖拽状态
     * @private
     */
    function _setDragOverStatus()
    {
        if (_checkContatinsElements())return;
        _uploadEle.innerText = _tip_drag_over;
        _uploadEle.style.border = "2px dashed #777";
        $(_uploadEle).css({lineHeight: $(_uploadEle).height() + "px"});
    }

    /**
     * 初始化状态
     * @private
     */
    function _setStatusNoDrag()
    {
        if (_checkContatinsElements())return;
        _uploadEle.innerText = _tip_no_drag;
        _uploadEle.style.border = "2px dashed #777";
        $(_uploadEle).css({lineHeight: $(_uploadEle).height() + "px"});
    }

    /**
     * 上传文件
     * @private
     */
    function _setDropStatus()
    {

        if (_checkContatinsElements())return;
        _uploadEle.innerText = "";
        _uploadEle.style.border = "1px solid #444";
        $(_uploadEle).css({lineHeight: "1em"});
        $(_uploadEle).append("<ul></ul>");

    };


    /**
     * 判断是否已经上传文件了
     * @private
     */
    function _checkContatinsElements()
    {
        return !!$(_uploadEle).find("li").size();

    }
    /**
     * 当ondragenter触发
     * @private
     */
    function _onDragEnter(ev)
    {
        _setDragOverStatus();
    }
    /**
     * 当ondargmove触发
     * @private
     */
    function _onDragOver(ev)
    {
        //ondragover中必须组织事件的默认行为，默认地，无法将数据/元素放置到其他元素中。
        ev.preventDefault();

    }
    /**
     * 当dragleave触发
     * @private
     */
    function _onDragLeave(ev)
    {
        _setStatusNoDrag();
    }

    /**
     * ondrop触发
     * @private
     */
    function _onDrop(ev)
    {
        //drop 事件的默认行为是以链接形式打开，所以也需要阻止其默认行为。
        ev.preventDefault();
        _setDropStatus();

        //拿到拖入的文件
        var files = ev.dataTransfer.files;
        var len = files.length;
        for (var i = 0; i < len; i++)
        {
            //页面上显示需要上传的文件
            _showUploadFile(files[i]);
        }
    }
    /**
     * 页面上显示需要上传的文件
     * @private
     */
    function _showUploadFile(file)
    {
        var reader = new FileReader();
//        console.log(file)
//        console.log(reader);

        //判断文件类型
        if (file.type.match(/image*/))
        {
            reader.onload = function (e)
            {
                var formData = new FormData();

                var li = $("#template li").clone();
                var img = li.find("img");
                var progress = li.find(".progress");
                var percentage = li.find(".percentage");
                percentage.text("0%");
                img.attr("src", e.target.result);
                $("ul", $(_uploadEle)).append(li);
                $(_uploadEle).find("li").size() == 10 && $(_uploadEle).width(($(_uploadEle).width() + 8) + "px").css("overflow", "auto");
                formData.append("uploadFile", file);

                //上传文件到服务器
                _uploadToServer(formData, li, progress, percentage);

            };
            reader.readAsDataURL(file);
        }
        else
        {
            console.log("此" + file.name + "不是图片文件！");
        }
    }

    /**
     * 上传文件到服务器
     * @private
     */
    function _uploadToServer(formData, li, progress, percentage)
    {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:8080/strurts2fileupload/uploadAction", true);
        xhr.setRequestHeader(&#39;X-Requested-With&#39;, &#39;XMLHttpRequest&#39;, &#39;Content-Type&#39;, &#39;multipart/form-data;&#39;);

        //HTML5新增的API，存储了上传过程中的信息
        xhr.upload.onprogress = function (e)
        {
            var percent = 0;
            if (e.lengthComputable)
            {
                //更新页面显示效果
                percent = 100 * e.loaded / e.total;
                progress.height(percent );
                percentage.text(percent + "%");
                percent >= 100 && li.addClass("done");
            }
        };
        xhr.send(formData);
    }


    //把init方法公布出去
    return{
        init: _init }


})();
</span>

Les commentaires sont très détaillés cette fois, nous n'avons pas utilisé de littéraux pour créer des objets. directement parce que je ne veux pas que les utilisateurs aient accès à toutes les méthodes et variables. J'utilise des fermetures simples. On peut voir que presque toutes les méthodes et variables commencent par _ car je pense qu'elles sont privées et je ne les ai pas publiées. raison Ce qui est annoncé est la méthode init que les utilisateurs doivent appeler. La méthode globale utilise également des espaces de noms, de sorte que les js écrits par d'autres partenaires ne posent pas les mêmes problèmes que les variables.

HTML FileApi est utilisé dans le js ci-dessus, voici une introduction :

1. object C'est ce que nous avons utilisé ci-dessus :

Fichier

lastModifiedDate : Jeudi 26 décembre 2013 18:45:08 GMT 0800 (heure normale de Chine)
nom : "yt_key.png"
taille : 45524
type : "image/png"
webkitRelativePath: ""
__proto__: Fichier

peut être vu comme contenant certains des attributs ci-dessus, c'est-à-dire que si vous utilisez un navigateur prenant en charge HTML5, définissez l'événement onchange pour input=type, et l'utilisateur sélectionne Après avoir sélectionné une image ou un fichier, vous pouvez porter un jugement sur l'affichage de l'image ou sur la taille et le type du fichier.

2、FileReader主要用于异步读取文件内容，注意是异步的，上例我们使用了它的readAsDataURL的方法，关于DataUri的知识可以自己去百度下。

另外还提供了：readAsText用于读取文本；readAsArrayBuffer和readAsBinaryString方法；

还提供了一些事件：onloadstart, onload, onprogress ,onerror , onloaded , onabort 有兴趣的可以去一个一个查看。

最后页面调用，大功告成：

<span style="font-size:12px;">    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/html5upload.js"></script>

    <script type="text/javascript">

        window.onload = function ()
        {
            ZhangHongyang.html5upload.init();
        }
        ;

    </script></span>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Cas classique HTML5/CSS3 - glisser-déposer pour télécharger des images sans plug-in (1)Article suivant：Cas classique HTML5/CSS3 - glisser-déposer pour télécharger des images sans plug-in (1)

Articles Liés

Voir plus