AJAX jQuery Avatar Uploading
AJAX jQuery Avatar Uploading
我一直在尝试找到一个非常基本的 AJAX jQuery 头像上传,我可以将其用于我的"设置"页面,以便用户可以上传头像,不幸的是我找不到任何头像。
这是我到目前为止上传头像的"功能"
function uploadAvatar(){
$('#avatarDialog').fadeIn();
$('#avatarDialog').html("Logging in, please wait....");
dataString = $('#avatarForm').serialize();
var postURL = $('#avatarForm').attr("action");
$.ajax({
type: "POST",
url: site_url+"/libraries/ajax/image-upload.php",
data:dataString,
dataType:"json",
cache:false,
success:function(data){
if(data.err){
$('#avatarDialog').fadeIn();
$('#avatarDialog').html(data.err);
}else if(data.msg){
$('#avatarDialog').fadeIn();
$('#avatarDialog').html(data.msg);
var delay = 2000;
window.setTimeout(function(){
location.reload(true);
}, delay);
}
}
});
return false;
};
对于我的 HTML/输入是这个。
<form id="avatar_form" action enctype="multipart/form-data" method="post">
<input name="image_file" id="imageInput" type="file" />
<input type="submit" id="submit-btn" onClick="uploadAvatar();" value="Upload" />
最后这是我的PHP代码(我这里什么都没有)
$thumb_square_size = 200;
$max_image_size = 500;
$thumb_prefix = "thumb_";
$destination_folder = './data/avatars/';
$jpeg_quality = 90; //jpeg quality
$return_json = array();
if($err==""){ $return_json['msg'] = $msg; }
else{ $return_json['err'] = $err; }
echo json_encode($return_json);
exit;
那么我该如何真正开始呢?我只是不知道从哪里开始,我不知道该怎么做。
Bulletproof是一个很好的PHP图像上传类,它包含了常见的安全问题和实践,所以我们将在这里使用它,因为它也使整个过程变得更加简单和干净。您需要在此处阅读有关此问题的已批准答案(https://security.stackexchange.com/questions/32852/risks-of-a-php-image-upload-form),以更好地了解接受用户文件上传的风险。
下面的 PHP 非常基本,实际上只处理图像上传。如果图像上传成功,您可能希望保存在数据库或某种存储中生成的路径或文件名。
您可能还希望更改将图像上传到的目录。为此,请将->uploadDir("uploads")
参数更改为其他相对路径或绝对路径。此值"uploads"
会将图像上传到libraries/ajax/uploads
目录。如果该目录不存在,防弹将首先创建它。
您将需要下载防弹(https://github.com/samayo/bulletproof)并确保将其上传或放置在libraries/bulletproof/
中。当您从github下载该类时,它将位于ZIP存档中。提取zip存档并将防弹主导演重命名为普通防弹。将该目录放在库目录中。
.HTML
<form id="avatar_form" action enctype="multipart/form-data" method="post">
<input name="image_file" id="imageInput" type="file" />
<input type="submit" id="submit-btn" value="Upload" />
</form>
.JS
$('#avatar_form').submit(function( event ){
event.preventDefault();
var formData = new FormData($(this)[0]); //use form data, not serialized string
$('#avatarDialog').fadeIn();
$('#avatarDialog').html("Logging in, please wait....");
$.ajax({
type: "POST",
url: site_url + "/libraries/ajax/image-upload.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data){
if(data.code != 200){ //response code other than 200, error
$('#avatarDialog').fadeIn();
$('#avatarDialog').html(data.msg);
} else { // response code was 200, everything is OK
$('#avatarDialog').fadeIn();
$('#avatarDialog').html(data.msg);
var delay = 2000;
window.setTimeout(function(){
location.reload(true);
}, delay);
}
}
});
return false;
});
.PHP
//bulletproof image uploads
//https://github.com/samayo/bulletproof
require_once('../bulletproof/src/bulletproof.php');
$bulletproof = new ImageUploader'BulletProof;
//our default json response
$json = array('code' => 200, 'msg' => "Avatar uploaded!");
//if a file was submitted
if($_FILES)
{
try
{
//rename the file to some unique
//md5 hash value of current timestamp and a random number between 0 & 1000
$filename = md5(time() . rand(0, 1000));
$result = $bulletproof->fileTypes(["png", "jpeg"]) //only accept png/jpeg image types
->uploadDir("uploads") //create folder 'pics' if it does not exist.
->limitSize(["min" => 1000, "max" => 300000]) //limit image size (in bytes) .01mb - 3.0mb
->shrink(["height" => 96, "width" => 96]) //limit image dimensions
->upload($_FILES['image_file'], $filename); // upload to folder 'pics'
//maybe save the filename and other information to a database at this point
//print the json output
print_r(json_encode($json));
}
catch(Exception $e)
{
$json['code'] = 500;
$json['msg'] = $e->getMessage();
print_r(json_encode($json));
}
}
else
{
//no file was submitted
//send back a 500 error code and a error message
$json['code'] = 500;
$json['msg'] = "You must select a file";
print_r(json_encode($json));
}
如果图像未通过验证测试,防弹将引发异常。我们在 try catch 块中捕获异常,并在 JSON 返回中将错误消息返回到 JavaScript。
其余代码在防弹 github 页面等中得到了很好的注释,但如果有什么不清楚的地方,请注释。