• 文件上传:swfupload.js、blueimp-file-upload


    一、swfupload

    1.下载swfupload  http://code.google.com/p/swfupload/

    2.

    3.API   http://www.cnblogs.com/henw/archive/2012/03/22/2411592.html  SWFUpload V2.2.0 API

    参考阅读:

    http://gxxsite.com/content/view/id/121.html

    http://www.5icool.org/a/201312/a3410.html

    http://www.91ctc.com/article/article-313.html

     未完成。。。

    我的例子: http://beijing.xxxxx.com/shops/comment.php?action=addComment&business_id=75  2015-12


    二、jQuery-File-Upload-9.11.2  这个测试成功

    http://blog.csdn.net/lengxue789/article/details/43169965 重要 2015-11-11

    http://www.bootcdn.cn/blueimp-file-upload/

    https://github.com/blueimp/jQuery-File-Upload/tags

    http://biancheng.dnbcw.info/jquery/463416.html  阅读

    http://www.cnblogs.com/silentjesse/p/3770253.html  阅读  ie9兼容问题

    http://www.jb51.net/article/59027.htm  阅读 ie9兼容问题

    http://blueimp.github.io/jQuery-File-Upload/jquery-ui.html

    http://www.jianshu.com/p/a01a09a4c56e  文档翻译

    https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support  api

    PHP输出图片文件:

    <?
    header("content-type:image/jpeg");
    $url="/home/monelife/public_html/uucat.com/Tulips.jpg";
    $imgfile = fopen($url,"r");
    echo fread($imgfile,filesize($url));
    fclose($imgfile);
    ?>

    PHP保存上传文件:

    <input type="file" id="test_file" name="test_file" multiple>
    <?
    if($_SERVER['REQUEST_METHOD']=='POST') {
      move_uploaded_file($_FILES["test_file"]["tmp_name"], "/home/monelife/public_html/uucat.com/" . $_FILES["test_file"]["name"]);
    ?>

    正文:

    文件1.php

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache"> 
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- bootstrap库 -->
    <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <link rel="stylesheet" href="css/jquery.fileupload.css">  
    <link rel="stylesheet" href="css/jquery.fileupload-ui.css">  
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.fileupload.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <script type="text/javascript">
    $(function() {  
    //url:后台提交的地址
    //fileuploadprogress:主要是进度条的修改
    //fileuploaddone:上传结束后执行的操作
        $("#test_file").fileupload({  
                //url: '__CONTROLLER__/uploadImg',  
                url: 'upload.php',  
                sequentialUploads: true  
            }).bind('fileuploadprogress', function (e, data) {  
                var progress = parseInt(data.loaded / data.total * 100, 10);  
                $("#test_progress").css('width',progress + '%');  
                $("#test_progress").html(progress + '%');  
            }).bind('fileuploaddone', function (e, data) {  
                $("#test_show").attr("src",""+data.result);  
                $("#test_upload").css({display:"none"});  
                $("#test_cancle").css({display:""});  
            });  
        });
    </script>
    <div class="row fileupload-buttonbar" style="padding-left:15px;">  
    <div class="thumbnail col-sm-6">  
    <img id="test_show" style="height:180px;margin-top:10px;margin-bottom:8px;"  src="" data-holder-rendered="true">  
    <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="test_progress" class="progress-bar progress-bar-success" style="0%;"></div></div>  
    <div class="caption" align="center">  
    <span id="test_upload" class="btn btn-primary fileinput-button">  
    <span>上传</span>  
    <input type="file" id="test_file" name="test_file" multiple>  
    </span>  
    <a id="test_cancle" href="javascript:void(0)" class="btn btn-warning" role="button" onclick="cancleUpload('weixin')" style="display:none">删除</a>  
    </div>
    </div>
    </div>
    </body>
    </html>

    文件2 upload.php

    <?
    if($_SERVER['REQUEST_METHOD']=='POST') {
        move_uploaded_file($_FILES["test_file"]["tmp_name"], "/home/monelife/public_html/uucat.com/" . $_FILES["test_file"]["name"]);
        $imgfileName = $_FILES["test_file"]["name"];
        echo "http://www.uucat.com/".$imgfileName;
    
        /*
        header("content-type:image/jpeg");
        $url="/home/monelife/public_html/uucat.com/".$imgfileName;
        $imgfile = fopen($url,"r");
        echo fread($imgfile,filesize($url));
        fclose($imgfile);*/
    }
    ?>

    jquery.fileupload-angular.js 的300行,看如下代码:

    fileuploadadd
    fileuploadsubmit
    fileuploadsend
    fileuploaddone
    fileuploadfail
    fileuploadalways
    fileuploadprogress//进度条的修改
    fileuploaddone//上传完毕 fileuploadprogressall fileuploadstart fileuploadstop fileuploadchange fileuploadpaste fileuploaddrop fileuploaddragover fileuploadchunksend fileuploadchunkdone fileuploadchunkfail fileuploadchunkalways fileuploadprocessstart fileuploadprocess fileuploadprocessdone fileuploadprocessfail fileuploadprocessalways fileuploadprocessstop

    -------------------------

    其他关于文件上传的,还没看

    1.fineuploader:

    http://fineuploader.com/

    http://www.bootcdn.cn/file-uploader/

    http://blog.csdn.net/sadfishsc/article/details/7342547

    http://bbs.csdn.net/topics/390674987   通过file文件选择图片预览功能(这个要看)2015-11-30

    http://www.cnblogs.com/tianguook/p/4230642.html   jquery实现上传文件大小类型的验证

    文件上传进度条(这三行是一些旧的内容,也放这里了)

    http://www.pureweber.com/article/php-upload-progress/  用PHP Session和Javascript实现文件上传进度条 

    http://www.cnblogs.com/zengxiangzhan/archive/2010/02/28/1675137.html    文件上传带进度条,asp的   

    http://bbs.csdn.net/topics/390765871    HTML5实现MP3上传前的预览和播放时长的获取

  • 相关阅读:
    [Leetcode]-Palindrome Number
    timesten升级
    C++的for循环细节,必看!
    web desktop在线演示
    定制流程
    西服定制 服装在线定制 GIMIWEAR高级定制
    Roseonly:互联网轻奢品牌之路-搜狐IT
    妊娠纹_百度百科
    ARPU_百度百科
    工商管理硕士(MBA)-北大国际MBA
  • 原文地址:https://www.cnblogs.com/qq21270/p/4955839.html
Copyright © 2020-2023  润新知