Klassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-Ins hochladen (2)-H5-Tutorial-php.cn

Klassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-Ins hochladen (2)

黄舟

Freigeben： 2017-03-09 16:38:29

Original

2103 Leute haben es durchsucht

Der vorherige Artikel hat das gesamte HTML und CSS dieses Projekts implementiert:

Klassischer HTML5/CSS3-Fall – Ziehen und Ablegen zum Hochladen von Bildern ohne Plug-Ins (1)

Dieser Blog basiert direkt auf dem vorherigen und der Endeffekt ist:

Rendering 1:

Rendering 2:

Okay, bitte erlaube mir, das Bild zweimal zu posten, damit jeder den Effekt sehen kann~

Du kann es sehen Das HTML des Li, das unsere Bilder produziert, ist eigentlich ziemlich kompliziert, deshalb habe ich einige Änderungen am HTML-Dokument vorgenommen:

<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>

Nach dem Login kopieren

Sie können sehen, dass ich die Anzeige von li unabhängig in eine p#-Vorlage geschrieben habe. Die Standardeinstellung ist ausgeblendet. Welche Vorteile hat dies? Um bei jedem Hochladen einer Datei eine große Menge Code zum Erstellen von Elementen und Zuweisen von Attributen in js zu vermeiden, wird im Allgemeinen die Verwendung dieser Methode empfohlen, die den Code vereinfachen und auch erleichtern kann spätere Wartung unseres Codes.

Js-Code:

<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>

Nach dem Login kopieren

Dieses Mal haben wir keine Literale zum Erstellen von Objekten verwendet Direkt, weil ich nicht möchte, dass Benutzer Zugriff auf alle Methoden und Variablen haben. Es ist ersichtlich, dass fast alle Methoden und Variablen mit _ beginnen, weil ich denke, dass sie privat sind und ich sie nicht veröffentlicht habe Grund Was angekündigt wird, ist die Init-Methode, die Benutzer aufrufen können. Die Gesamtmethode verwendet auch Namespaces, sodass die von anderen Partnern geschriebenen js grundsätzlich nicht das gleiche Problem mit Variablen verursachen.

HTML FileApi wird in den oben genannten js verwendet, hier ist eine Einführung:

1 Objekt Das haben wir oben verwendet:

Datei

lastModifiedDate: Do, 26. Dezember 2013 18:45:08 GMT+0800 (China Standard Time)
Name : "yt_key.png"
Größe: 45524
Typ: "image/png"
webkitRelativePath: ""
__proto__: Datei

Sie können sehen, dass sie einige der oben genannten Attribute enthält, das heißt, wenn Sie einen Browser verwenden, der HTML5 unterstützt, und onchange festlegen Ereignis für Eingabe = Typ, der Benutzer Nachdem Sie ein Bild oder eine Datei ausgewählt haben, können Sie ein Urteil über die Anzeige des Bilds oder die Größe und den Typ der Datei fällen.

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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKlassischer HTML5/CSS3-Fall – Bilder per Drag & Drop ohne Plug-Ins hochladen (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!