javascritp 图片拖动和上传时显示图片

有时候我们上传图片时希望立即显示出来，也有时候希望图片能根据自己的意愿拖动，下面的代码可以实现我们想要的效果。

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > 鼠标拖动测试 < / title>
     < script type = " text/javascript "  language = " javascript " >
     // 为Number增加一个属性,判断当前数据类型是否是数字
    Number.prototype.NaN0 = function (){ return  isNaN( this ) ? 0 : this ;}

     // 全局变量
     var  iMouseDown = false ;
     var  dragObject = null ;

     // 获得鼠标的偏移量(对象2-对象1)
     function  getMouseOffset(target,ev)
    {
        ev = ev || window.event;
         var  docPos = getPosition(target);
         var  mousePos = mouseCoords(ev);
         return  {x:mousePos.x - docPos.x,y:mousePos.y - docPos.y};
    }

     // 获得事件发生的实际位置----------------------对象1
     function  getPosition(e)
    {
         var  left = 0 ;
         var  top = 0 ;
         // 相对位置累加得到实际位置
         while (e.offsetParent)
        {
            left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0(): 0 );
            top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0(): 0 );
            e = e.offsetParent;
        }
        left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0(): 0 );
        top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0(): 0 );
         return  {x:left,y:top};
    }
     // 获得发生事件鼠标的位置----------------------对象2
     function  mouseCoords(ev)
    {
         if (ev.pageX || ev.pageY)
        {
             return  {x:ev.pageX,y:ev.pageY};
        }
         return  {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
    }


     // 定义可以拖拽的对象
     function  makeDragable(item)
    {
         if ( ! item)  return ;
         // 为可拖拽对象定义一个onmousedown事件的方法
        ev = window.event;
        item.onmousedown = function (ev)
        {
            dragObject = this ;
            mouseOffset = getMouseOffset( this ,ev);
             return   false ;
        }
    }

     // 定义鼠标点下所调用的方法
     function  mouseDown(ev)
    {
        ev = ev || window.event;
        
         var  target = ev.target || ev.srcElement;
         if (target.onmousedown || target.getAttribute( ' DragObj ' ))
        {
             return   false ;
        }    
    }
     // 鼠标抬起后释放对象
     function  mouseUp(ev)
    {
        dragObject  =   null ;
         // onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false 
        iMouseDown  =   false ;
    }

     // 鼠标移动
     function  mouseMove(ev)
    {
        ev = ev || window.event;
         var  target    =  ev.target  ||  ev.srcElement;
         var  mousePos  =  mouseCoords(ev);
         if (dragObject)
        {
             if (dragObject.style)
            {
                 // 移动对象
                dragObject.style.left = mousePos.x  -  mouseOffset.x;
                dragObject.style.top =  mousePos.y  -  mouseOffset.y;
            }
        }
         // lMouseState = iMouseDown;
         if (dragObject)  return   false ;
    }
    document.onmousedown = mouseDown;
    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;


     function  moveImg()
    {
         var  img1 = document.getElementById( ' img1 ' );
        makeDragable(img1);
    }
     < / script>
< / head>
< body onload = " moveImg() " >
     < form id = " form1 " >       
< input type = " file "  onchange = " javascript:document.getElementById('img1').src=this.value "/ > 
  < img src = " a.jpg "   alt = ""  id = " img1 "   style = " position:absolute; "   / >
     < / form>
< / body>
< / html>