页首Html代码

上传图片

js

    $(function () {  
                //文件上传地址  
                //var url = 'http://localhost/index.php/upload/do_upload';  
                var url = 'http://localhost/index.php/uploadwe';  
                //初始化，主要是设置上传参数，以及事件处理方法(回调函数)  
                $('#fileupload').fileupload({  
                    autoUpload: true,//是否自动上传  
                    //url: url,//上传地址  
                    dataType: 'json',  
                    done: function (e, data) {//设置文件上传完毕事件的回调函数  
                        //$.each(data.result.files, function (index, file) {  
                        $("#myimg").attr({src:data.result.imgurl});  
                        $("#myimg").css({width:"290px",height:"218px"});  
                        //alert(data.result);  
                    },  
                    progressall: function (e, data) {//设置上传进度事件的回调函数  
                        var progress = parseInt(data.loaded / data.total * 5, 10);  
                        $('#progress .bar').css(  
                            'width',  
                            progress + '%'  
                        );  
                    }  
                });  
            });

上传至服务后，服务器返回json数据--上传图片的地址。

 

HTML：

[html] view plaincopy
    1. <label for="text">上传图片</label>  
    2. <input id="fileupload" type="file" name="files" data-url="<span style="color:#ff6666;">jquery_save_img</span>" multiple> 

 

 

服务器端：

[php] view plaincopy在CODE上查看代码片派生到我的代码片

    function jquery_save_img()  
        {  
            $arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');  
            $max_size='500000000000';      // 最大文件限制（单位：byte）  
            $upfile='./uploads'; //图片目录路径  
            $file=$_FILES['files'];  
      
            /* 
            echo 'filename:'.$file['tmp_name'].';<br />'; 
            echo 'size:'.$file['size'].';<br />'; 
            echo 'type:'.$file['type'].';<br />'; 
            echo 'name:'.$file['name'].';<br />'; 
            */  
              
            if($_SERVER['REQUEST_METHOD']=='POST'){ //判断提交方式是否为POST  
                if(!is_uploaded_file($file['tmp_name'])){ //判断上传文件是否存在  
                    echo "<font color='#FF0000'>文件不存在！</font>";  
                    exit;  
                }  
      
                if($file['size']>$max_size){  //判断文件大小是否大于500000字节  
                    echo "<font color='#FF0000'>上传文件太大！</font>";  
                    exit;  
                }   
                if(!in_array($file['type'],$arrType)){  //判断图片文件的格式  
                    echo "<font color='#FF0000'>上传文件格式不对！</font>xxx:".$file['type'];  
                    exit;  
                }  
                if(!file_exists($upfile)){  // 判断存放文件目录是否存在  
                    mkdir($upfile,0777,true);  
                }   
                $imageSize=getimagesize($file['tmp_name']);  
                $img=$imageSize[0].'*'.$imageSize[1];  
                $fname=$file['name'];  
                $ftype=explode('.',$fname);  
                $picName=$upfile."/cloudy".$fname;  
      
                if(file_exists($picName)){  
                    //echo "<font color='#FF0000'>同文件名已存在！</font>";  
                    //exit;  
                }  
                if(!move_uploaded_file($file['tmp_name'],$picName)){    
                    echo "<font color='#FF0000'>移动文件出错！</font>";  
                    exit;  
                }  
                else{  
                /* 
                    echo "<font color='#FF0000'>图片文件上传成功！</font><br/>"; 
                    echo "<font color='#0000FF'>图片大小：$img</font><br/>"; 
                    echo "图片预览：<br><div style='border:#F00 1px solid; width:200px;height:200px'> 
                    <img src=\"".$picName."\" width=200px height=200px>".$fname."</div>"; 
                */  
                    echo '{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}';  
                }  
            }  
          
        }

 

posted on 2015-11-24 10:29  西北阳仔2号  阅读(203)  评论(0)    收藏  举报
页脚Html代码