jQuery+php实现ajax文件即时上传的实现方法
内容摘要
这篇文章主要为大家详细介绍了jQuery+php实现ajax文件即时上传的实现方法,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随php教程的小玲来看看吧!很多项
感兴趣的小伙伴,下面一起跟随php教程的小玲来看看吧!很多项
文章正文
这篇文章主要为大家详细介绍了jQuery+php实现ajax文件即时上传的实现方法,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随php教程的小玲来看看吧!
很多项目中需要用到即时上传功能,比如,选择本地图片后,立即上传并显示图像。本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能,用户只需选择本地图片确定后即实现上传,并显示上传进度条,上传完成后,显示图片信息。HTML本示例基于jQuery以及相当出色的jquery.form插件,所以,先要载入jquery库和form插件。<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.form.js"></script>接着在页面中加入如下代码:
代码如下:
1 2 3 4 5 6 7 8 9 10 | <code><div class = "btn" > <span>添加附件</span> <input id= "fileupload" type= "file" name= "mypic" > </div> <div class = "progress" > <span class = "bar" ></span><span class = "percent" >0%</span > </div> <div class = "files" ></div> <div id= "showimg" ></div> </code> |
CSS我们使用css可以将传统的浏览文件的表单控件美化成一个按钮,这样看起来是不是很酷。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <code>.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block; *display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px; *line-height:20px;color:#fff; text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b; border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color:#b3b3b3;-webkit-border-radius:4px; -moz-border-radius:4px;border-radius:4px;} .btn input{position: absolute;top: 0; right: 0;margin: 0;border:solid transparent; opacity: 0;filter:alpha(opacity=0); cursor: pointer;} .progress{position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none} .bar {background-color: green; display:block; width:0%; height:20px; border-radius:3px; } .percent{position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff } .files{height:22px; line-height:22px; margin:10px 0} .delimg{margin-left:20px; color:#090; cursor:pointer} </code> |
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <code>$( function () { var bar = $( '.bar' ); var percent = $( '.percent' ); var showimg = $( '#showimg' ); var progress = $( ".progress" ); var files = $( ".files" ); var btn = $( ".btn span" ); $( "#fileupload" ).wrap("<form id= 'myupload' action= 'action.php' method= 'post' enctype= 'multipart/form-data' ></form>"); $( "#fileupload" ).change( function (){ //选择文件 $( "#myupload" ).ajaxSubmit({ dataType: 'json' , //数据格式为json beforeSend: function () { //开始上传 showimg. empty (); //清空显示的图片 progress.show(); //显示进度条 var percentVal = '0%' ; //开始进度为0% bar.width(percentVal); //进度条的宽度 percent.html(percentVal); //显示进度为0% btn.html( "上传中..." ); //上传按钮显示上传中 }, uploadProgress: function (event, position, total, percentComplete) { var percentVal = percentComplete + '%' ; //获得进度 bar.width(percentVal); //上传进度条宽度变宽 percent.html(percentVal); //显示上传进度百分比 }, success: function (data) { //成功 //获得后台返回的json数据,显示文件名,大小,以及删除按钮 files.html( "<b>" +data.name+ "(" +data.size+"k)</b> <span class = 'delimg' rel= '"+data.pic+"' >删除</span>"); //显示上传后的图片 var img = "http://demo.helloweba.com/upload/files/" +data.pic; showimg.html( "<img src='" +img+ "'>" ); btn.html( "添加附件" ); //上传按钮还原 }, error: function (xhr){ //上传失败 btn.html( "上传失败" ); bar.width( '0' ); files.html(xhr.responseText); //返回失败信息 } }); }); ... }); </code> |
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <code>$( function () { ...接上面的代码 $( ".delimg" ).live( 'click' , function (){ var pic = $(this).attr( "rel" ); $.post( "action.php?act=delimg" ,{imagename:pic}, function (msg){ if (msg==1){ files.html( "删除成功." ); showimg. empty (); //清空图片 progress.hide(); //隐藏进度条 } else { alert(msg); } }); }); }); </code> |
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <code> $action = $_GET [ 'act' ]; if ( $action == 'delimg' ){ //删除图片 $filename = $_POST [ 'imagename' ]; if (! empty ( $filename )){ unlink( 'files/' . $filename ); echo '1' ; } else { echo '删除失败.' ; } } else { //上传图片 $picname = $_FILES [ 'mypic' ][ 'name' ]; $picsize = $_FILES [ 'mypic' ][ 'size' ]; if ( $picname != "" ) { if ( $picsize > 512000) { //限制上传大小 echo '图片大小不能超过500k' ; exit ; } $type = strstr ( $picname , '.' ); //限制上传格式 if ( $type != ".gif" && $type != ".jpg" ) { echo '图片格式不对!' ; exit ; } $rand = rand(100, 999); $pics = date ( "YmdHis" ) . $rand . $type ; //命名图片名称 //上传路径 $pic_path = "files/" . $pics ; move_uploaded_file( $_FILES [ 'mypic' ][ 'tmp_name' ], $pic_path ); } $size = round ( $picsize /1024,2); //转换成kb $arr = array ( 'name' => $picname , 'pic' => $pics , 'size' => $size ); echo json_encode( $arr ); //输出json数据 } </code> |
注:关于jQuery+php实现ajax文件即时上传的实现方法的内容就先介绍到这里,更多相关文章的可以留意
代码注释