HTML5经典应用：拖拽上传图片

本文转载于:猿2048网站➨HTML5经典应用：拖拽上传图片

因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧。

界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起，而且你可以用 IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图：

拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云。所以先来看下js实现代码吧。

 
  01 
     $().ready(function(){

 
  02 
         if($.browser.safari || $.browser.mozilla){

 
  03 
             $('#dtb-msg1 .compatible').show();

 
  04 
             $('#dtb-msg1 .notcompatible').hide();

 
  05 
             $('#drop_zone_home').hover(function(){

 
  06 
                 $(this).children('p').stop().animate({top:'0px'},200);

 
  07 
             },function(){

 
  08 
                 $(this).children('p').stop().animate({top:'-44px'},200);

 
  09 
             });

 
  10 
             //功能实现

 
  11 
             $(document).on({

 
  12 
                 dragleave:function(e){

 
  13 
                     e.preventDefault();

 
  14 
                     $('.dashboard_target_box').removeClass('over');

 
  15 
                 },

 
  16 
                 drop:function(e){

 
  17 
                     e.preventDefault();

 
  18 
                     //$('.dashboard_target_box').removeClass('over');

 
  19 
                 },

 
  20 
                 dragenter:function(e){

 
  21 
                     e.preventDefault();

 
  22 
                     $('.dashboard_target_box').addClass('over');

 
  23 
                 },

 
  24 
                 dragover:function(e){

 
  25 
                     e.preventDefault();

 
  26 
                     $('.dashboard_target_box').addClass('over');

 
  27 
                 }

 
  28 
             });

29

标签

html5

传照片