• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5 拖拽上传图片实例演示
    因为标题写的是实例,所以本次就不做讲解了,因为这个实例我也算是东拼西凑整出来的,参考了大概5、6款拖拽上传的插件和demo,然后把其中好的地方挑出来,最后就成了这么一个实例,一起来看下吧(地址不能保证长久有效,如果失效请在文章最后点击demo下载):
     
    界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传,另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片的提示的,如图:
     
    拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台,然后做对应的处理,比如压缩啊,裁剪啊云云。所以先来看下js实现代码吧。

    复制代码
    代码如下:

    $().ready(function(){
    if($.browser.safari || $.browser.mozilla){
    $('#dtb-msg1 .compatible').show();
    $('#dtb-msg1 .notcompatible').hide();
    $('#drop_zone_home').hover(function(){
    $(this).children('p').stop().animate({top:'0px'},200);
    },function(){
    $(this).children('p').stop().animate({top:'-44px'},200);
    });
    //功能实现
    $(document).on({
    dragleave:function(e){
    e.preventDefault();
    $('.dashboard_target_box').removeClass('over');
    },
    drop:function(e){
    e.preventDefault();
    //$('.dashboard_target_box').removeClass('over');
    },
    dragenter:function(e){
    e.preventDefault();
    $('.dashboard_target_box').addClass('over');
    },
    dragover:function(e){
    e.preventDefault();
    $('.dashboard_target_box').addClass('over');
    }
    });
    var box = document.getElementById('target_box');
    box.addEventListener("drop",function(e){
    e.preventDefault();
    //获取文件列表
    var fileList = e.dataTransfer.files;
    var img = document.createElement('img');
    //检测是否是拖拽文件到页面的操作
    if(fileList.length == 0){
    $('.dashboard_target_box').removeClass('over');
    return;
    }
    //检测文件是不是图片
    if(fileList[0].type.indexOf('image') === -1){
    $('.dashboard_target_box').removeClass('over');
    return;
    }
    if($.browser.safari){
    //Chrome8+
    img.src = window.webkitURL.createObjectURL(fileList[0]);
    }else if($.browser.mozilla){
    //FF4+
    img.src = window.URL.createObjectURL(fileList[0]);
    }else{
    //实例化file reader对象
    var reader = new FileReader();
    reader.onload = function(e){
    img.src = this.result;
    $(document.body).appendChild(img);
    }
    reader.readAsDataURL(fileList[0]);
    }
    var xhr = new XMLHttpRequest();
    xhr.open("post", "test.php", true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.upload.addEventListener("progress", function(e){
    $("#dtb-msg3").hide();
    $("#dtb-msg4 span").show();
    $("#dtb-msg4").children('span').eq(1).css({width:'0px'});
    $('.show').html('');
    if(e.lengthComputable){
    var loaded = Math.ceil((e.loaded / e.total) * 100);
    $("#dtb-msg4").children('span').eq(1).css({width:(loaded*2)+'px'});
    }
    }, false);
    xhr.addEventListener("load", function(e){
    $('.dashboard_target_box').removeClass('over');
    $("#dtb-msg3").show();
    $("#dtb-msg4 span").hide();
    var result = jQuery.parseJSON(e.target.responseText);
    alert(result.filename);
    $('.show').append(result.img);
    }, false);
    var fd = new FormData();
    fd.append('xfile', fileList[0]);
    xhr.send(fd);
    },false);
    }else{
    $('#dtb-msg1 .compatible').hide();
    $('#dtb-msg1 .notcompatible').show();
    }
    });

    开始我是先判断浏览器类型,因为刚才介绍过,不同浏览器看到的是不同界面。主要实现代码是从“功能实现”开始的,这块具体为何这样操作,原理是什么,我就不多说了,大家可以参考下这篇文章:《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)》,不过ajax上传部分的代码还是有点不一样的,因为人人那个似乎有点麻烦,我就另寻途径了。
      最后就是上传部分的PHP代码了,这里我只是提供个参考,你可以根据项目的需求来自己编写。

    复制代码
    代码如下:

    $r = new stdClass();
    header('content-type: application/json');
    $maxsize = 10; //Mb
    if($_FILES['xfile']['size'] > ($maxsize * 1048576)){
    $r->error = "图片大小不超过 $maxsize MB";
    }
    $folder = 'files/';
    if(!is_dir($folder)){
    mkdir($folder);
    }
    $folder .= $_POST['folder'] ? $_POST['folder'] . '/' : '';
    if(!is_dir($folder)){
    mkdir($folder);
    }
    if(preg_match('/image/i', $_FILES['xfile']['type'])){
    $filename = $_POST['value'] ? $_POST['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . '.jpg';
    }else{
    $tld = split(',', $_FILES['xfile']['name']);
    $tld = $tld[count($tld) - 1];
    $filename = $_POST['value'] ? $_POST['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . $tld;
    }
    $types = Array('image/png', 'image/gif', 'image/jpeg');
    if(in_array($_FILES['xfile']['type'], $types)){
    $source = file_get_contents($_FILES["xfile"]["tmp_name"]);
    imageresize($source, $filename, $_POST['width'], $_POST['height'], $_POST['crop'], $_POST['quality']);
    }else{
    move_uploaded_file($_FILES["xfile"]["tmp_name"], $filename);
    }
    $path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
    $r->filename = $filename;
    $r->path = $path;
    $r->img = '<img src="' . $path . $filename . '" alt="image" />';
    echo json_encode($r);
    function imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
    $quality = $quality ? $quality : 80;
    $image = imagecreatefromstring($source);
    if ($image) {
    // Get dimensions
    $w = imagesx($image);
    $h = imagesy($image);
    if (($width && $w > $width) || ($height && $h > $height)) {
    $ratio = $w / $h;
    if (($ratio >= 1 || $height == 0) && $width && !$crop) {
    $new_height = $width / $ratio;
    $new_width = $width;
    } elseif ($crop && $ratio <= ($width / $height)) {
    $new_height = $width / $ratio;
    $new_width = $width;
    } else {
    $new_width = $height * $ratio;
    $new_height = $height;
    }
    } else {
    $new_width = $w;
    $new_height = $h;
    }
    $x_mid = $new_width * .5; //horizontal middle
    $y_mid = $new_height * .5; //vertical middle
    // Resample
    error_log('height: ' . $new_height . ' - width: ' . $new_width);
    $new = imagecreatetruecolor(round($new_width), round($new_height));
    imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
    // Crop
    if ($crop) {
    $crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
    imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
    //($y_mid - ($height * .5))
    }
    // Output
    // Enable interlancing [for progressive JPEG]
    imageinterlace($crop ? $crop : $new, true);
    $dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
    if ($dext == '') {
    $dext = $ext;
    $destination .= '.' . $ext;
    }
    switch ($dext) {
    case 'jpeg':
    case 'jpg':
    imagejpeg($crop ? $crop : $new, $destination, $quality);
    break;
    case 'png':
    $pngQuality = ($quality - 100) / 11.111111;
    $pngQuality = round(abs($pngQuality));
    imagepng($crop ? $crop : $new, $destination, $pngQuality);
    break;
    case 'gif':
    imagegif($crop ? $crop : $new, $destination);
    break;
    }
    @imagedestroy($image);
    @imagedestroy($new);
    @imagedestroy($crop);
    }
    }

    PHP最终会返回一个JSON格式的数组,我返回的信息就是图片地址、名称,还有段img的html代码,最后在js那边获取到json数组并处理,至此,操作结束。
    文章最开始提到,还有点击选择文件上传和网络图片,因为这2个不属于这次的主题范围内,就不说了。况且这2个功能实现起来都不麻烦。
    demo下载
    上一篇:html5 跨文档消息传输示例探讨
    下一篇:如何让IE9以下版本(ie6/7/8)认识html5元素
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5 拖拽上传图片实例演示 html5,拖拽,上传,图片,实例,