jquery File uploadʹÓÃ×ܽᣬjqueryupload
1. jquery file upload ÏÂÔØ

jquery file upload Demo µØÖ·£ºhttps://blueimp.github.io/jQuery-File-Upload/

jquery file upload ÏÂÔØ   µØÖ·£ºhttps://github.com/blueimp/jQuery-File-Upload/tags

jquery file upload API    µØÖ·£ºhttps://github.com/blueimp/jQuery-File-Upload/wiki/API

ʹÓÃÁËbootstrap¿ò¼Ü£¬Ñùʽ¿ÉÒԲο¼Demo¡£

×Ô¶¨ÒåµÄÑùʽ£º

<div class="row fileupload-buttonbar" style="padding-left:15px;"> <div class="thumbnail col-sm-6"> <img id="weixin_show" style="height:180px;margin-top:10px;margin-bottom:8px;" src="__PUBLIC__/images/game/game_1.png" data-holder-rendered="true"> <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div> <div class="caption" align="center"> <span id="weixin_upload" class="btn btn-primary fileinput-button"> <span>ÉÏ´«</span> <input type="file" id="weixin_image" name="weixin_image" multiple> </span> <a id="weixin_cancle" href="javascript:void(0)" class="btn btn-warning" role="button" onclick="cancleUpload('weixin')" style="display:none">ɾ³ý</a> </div> </div> </div>
ÐèÒªÒýÈëµÄjs¡¢cssÎļþ

<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet"> <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> <link rel="stylesheet" href="__PUBLIC__/css/jquery.fileupload.css"> <link rel="stylesheet" href="__PUBLIC__/css/jquery.fileupload-ui.css"> <script src="__PUBLIC__/js/jquery.min.js"></script> <script src="__PUBLIC__/js/vendor/jquery.ui.widget.js"></script> <script src="__PUBLIC__/js/jquery.fileupload.js"></script> <script src="__PUBLIC__/js/jquery.iframe-transport.js"></script>
µ÷Ó÷½Ê½£º

$(function() { $("#weixin_image").fileupload({ url: '__CONTROLLER__/uploadImg', sequentialUploads: true }).bind('fileuploadprogress', function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $("#weixin_progress").css('width',progress + '%'); $("#weixin_progress").html(progress + '%'); }).bind('fileuploaddone', function (e, data) { $("#weixin_show").attr("src","__PUBLIC__/"+data.result); $("#weixin_upload").css({display:"none"}); $("#weixin_cancle").css({display:""}); }); });
url£ººǫ́Ìá½»µÄµØÖ·

fileuploadprogress£ºÖ÷ÒªÊǽø¶ÈÌõµÄÐÞ¸Ä

fileuploaddone£ºÉÏ´«½áÊøºóÖ´ÐеIJÙ×÷

ʹÓõÄthinkphp´úÂ룬ÉÏ´«´úÂëºÜ¼òµ¥

public function uploadImg(){ $upload = new \Think\Upload();// ʵÀý»¯ÉÏ´«Àà $upload->maxSize = 3145728 ;// ÉèÖø½¼þÉÏ´«´óС //$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// ÉèÖø½¼þÉÏ´«ÀàÐÍ $upload->rootPath = './Public/Uploads/'; // ÉèÖø½¼þÉÏ´«¸ùĿ¼ $upload->savePath = ''; // ÉèÖø½¼þÉÏ´«£¨×Ó£©Ä¿Â¼ // ÉÏ´«Îļþ $info = $upload->uploadOne($_FILES['weixin_image']); if(!$info) {// ÉÏ´«´íÎóÌáʾ´íÎóÐÅÏ¢ //$this->error($upload->getError()); echo 0; }else{// ÉÏ´«³É¹¦ »ñÈ¡ÉÏ´«ÎļþÐÅÏ¢ //$this->display('templateList'); echo "Uploads/".$info['savepath'].$info['savename']; } }

¡¡