图片预览上传

上传图片之前应该让用户可以预览一下刚才选中的图片，这对于优化用户体验非常重要，本文主要介绍一下简单的图片预览的效果及ajax的formData上传和php接收添加数据库的基本操作

直接上代码

HTML

<style>
  button{
    margin-top: 50px;
  }
</style>
<body> 
    <label for="username">用户名：</label>
    <input type="text" placeholder="请输入用户名" id="username">
    <!--这里限制了可以上传的文件只能是图片，且可以一次上传多张图片-->
      <input type="file" id="file" accept="image/gif,image/jpeg,image/jpg,image/png" multiple><br/>
      <button>上传</button>
      <script src="jquery.min.js"></script> 
</body>

JS

$(function(){
    //图片预览
    var FileReader = window.FileReader;   //创建文件读取对象
    $("#file").change(function() {  
        if (FileReader) {                 //chrome浏览器处理  
            var file = this.files;        //获取一次上传的全部文件
            var length = file.length; 
            for(var i=0; i<length;i++){
                upload(this,i)            //逐个上传
            } 
        }  
        else {//其他浏览器处理
           var path = $(this).val();  
            if (/"\w\W"/.test(path)) {  
                path = path.slice(1,-1);  
            }  
            $("#image").attr("src",path);
        }  
    });  

    function upload(obj,i){
        var reader = new FileReader();
        var file = obj.files;
        reader.readAsDataURL(file[i]);   //读取文件路径
        reader.onload = function(e) {  
            var Img = new Image()
            Img.src=e.target.result;     //将读取到的文件给到新创建的image
            Img.width=100;
            Img.height=100;
            document.body.appendChild(Img);//这里是把图片转成64位数据存入<img>中的src里
        };  
    }  

    //图片上传
    $('button').click(function(){
        var username =$('#username').val();
        var form = new FormData();
        var file = $('#file')[0]['files'][0]; //点击提交的时候获取图片地址    
        form.append('username',username);
        form.append('file',file);     
        $.ajax({
            type:'post',
            url:'../php/add.php',
            data:form,
            processData:false,   //ajax 提交的时候不会序列化data，而是直接使用data
            contentType:false,   //发送信息至服务器时内容编码类型设置为不需要编码
            success:function(data){
                alert(data)
            }
        })

    })
})

PHP

if(!empty($_POST['username'])){
    $username = $_POST['username'];
}    
//处理文件
if(!file_exists('../uploads')){
    mkdir('../uploads');  //创建文件夹接收图片
}
$file = $_FILES['file']['tmp_name'];  //获取文件路径
$newName = $_FILES['file']['name']; //获取文件的名字
$res = move_uploaded_file($file,"../uploads/{$newName}"); //原名上传到指定文件夹
if($res){
    $url="../uploads/{$newName}";
}

$sql ="INSERT INTO addmore (username,url) VALUES('$username','$url')";
$res =add($sql);

//增加数据
function add($sql){
    $mysqli = new mysqli('localhost','root','','mybook');
    //设置编码
    $mysqli->query('set names utf8');
    $res = $mysqli->query($sql);
    if($res){
        echo '添加成功';
    }else{
        echo '添加失败';
    }
}

OVER

2016-12-19