文件上传：swfupload.js、blueimp-file-upload - bjhhh

公告

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

一、swfupload

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

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="width: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上传前的预览和播放时长的获取

posted on 2015-11-11 13:40 bjhhh 阅读(1099) 评论(0) 编辑收藏举报

刷新页面返回顶部

21270

公告