jQuery php ajax图片上传
jquery php ajax图片上传,上传后有预览,上传进度显示
上传文件和删除文件的处理都在action.php文件处理
![](https://i-blog.csdnimg.cn/blog_migrate/c351e195f5c29caca18832dd147e5d2c.jpeg)
XML/HTML Code
- <div class="demo">
- <p>允许上传gif/jpg/png格式的图片,图片体积不能超过500k
- </p>
- <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>
- </div>
css文件
CSS 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-color:#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; rightright: 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}
js文件
JavaScript Code
- <script type="text/javascript">
- $(function () {
- var bar = $('.bar');
- var percent = $('.percent');
- var showimg = $('#showimg');
- var progress = $(".progress");
- var files = $(".files");
- var btn = $(".btn span");
- $(".demo").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>");
- $("#fileupload").change(function(){
- $("#myupload").ajaxSubmit({
- dataType: 'json',
- beforeSend: function() {
- showimg.empty();
- progress.show();
- var percentVal = '0%';
- bar.width(percentVal);
- percent.html(percentVal);
- btn.html("上传中...");
- },
- uploadProgress: function(event, position, total, percentComplete) {
- var percentVal = percentComplete + '%';
- bar.width(percentVal)
- percent.html(percentVal);
- },
- /*complete: function(xhr) {
- $(".files").html(xhr.responseText);
- },*/
- success: function(data) {
- files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");
- var img = "../upload/"+data.pic;
- showimg.html("<img src='"+img+"'>");
- btn.html("添加附件");
- },
- error:function(xhr){
- btn.html("上传失败");
- bar.width('0')
- files.html(xhr.responseText);
- }
- });
- });
- $(".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);
- }
- });
- });
- });
- </script>
action.php
PHP Code
- <?php
- $action = $_GET['act'];
- if($action=='delimg'){
- $filename = $_POST['imagename'];
- if(!emptyempty($filename)){
- unlink('../upload/'.$filename);
- echo '1';
- }else{
- echo '删除失败.';
- }
- }else{
- $picname = $_FILES['mypic']['name'];
- $picsize = $_FILES['mypic']['size'];
- if ($picname != "") {
- if ($picsize > 1024000*30) {
- echo '图片大小不能超过30M';
- exit;
- }
- $type = strstr($picname, '.');
- if ($type != ".gif" && $type != ".jpg" && $type != ".png") {
- echo '图片格式不对!';
- exit;
- }
- $rand = rand(100, 999);
- $pics = date("YmdHis") . $rand . $type;
- //上传路径
- $pic_path = "../upload/". $pics;
- move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);
- }
- $size = round($picsize/1024,2);
- $arr = array(
- 'name'=>$picname,
- 'pic'=>$pics,
- 'size'=>$size
- );
- echo json_encode($arr);
- }
- ?>