php文件上传

jQuery+php实现ajax文件即时上传

https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.min.js
//cdn.bootcss.com/jquery/3.2.1/jquery.min.js

添加附件

 < input id="fileupload" type="file" name="myfile" >

我们用于上传文件的html中并没有出现form表单,而正常的上传功能是要依赖form表单的。我们的form表单是动态插入的,这样可以避免一个大表单中出现多个form。
对该按钮进行样式修改

.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;} 

首先定义各种变量,注意动态将表单元素form插入到上传按钮部位,并且form的属性enctype必须设置为:multipart/form-data。然后当点击“上传附件”按钮,选择要上传的文件后,调用jquery.form插件的ajaxSubmit方法,如下代码说明。

$(function () { 
    var files = $(".files"); 
    var btn = $(".btn span"); 
    $("#fileupload").wrap("< form id='myupload' action='uploadfile.php'  
    method='post' enctype='multipart/form-data' >< /form >"); 
    $("#fileupload").change(function(){ //选择文件 
        $("#myupload").ajaxSubmit({ 
            dataType:  'json', //数据格式为json 
            beforeSend: function() { //开始上传 
                btn.html("上传中..."); //上传按钮显示上传中 
            }, 
            uploadProgress: function(event, position, total, percentComplete) { 
                // TODO
            }, 
            success: function(data) { //成功 
                //获得后台返回的json数据,显示文件名,大小,以及删除按钮 
                // file_name
                btn.html("添加附件"); //上传按钮还原 
            }, 
            error:function(xhr){ //上传失败 
                btn.html("上传失败"); 
            } 
        }); 
    }); 
}); 


需要通过PHP文件来完成文件上传。图片上传时需要验证格式和大小,然后通过move_uploaded_file()方法上传图片,最后返回json格式的数据。为了安全起见,这里文件上传就不做说明了!

欢迎留言

avatar
  Subscribe  
Notify of