thinkphp entwickelt das Hochladen von Bildern. Dies ist derzeit eine bequemere Funktion. Ich werde hier nicht die CSS-Datei schreiben, sondern den Code.
Stellen Sie den Kerndatei-Download vor https://github.com/carlcarl/AjaxFileUpload
HTML
Im Folgenden werden zunächst die relevanten js-Ressourcen auf der HTML-Seite vorgestellt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></script> </head> <body> </body> </html>
Dann erstellen Sie das entsprechende p im body
<label class="title w100">封面图片:</label> <p class="f_l"> <label class="fileupload" onclick="upd_file(this,'image_file');"> <input type="file" class="filebox" name="image_file" id="image_file"/> <!--上传成功后图片会给value赋值图片路径，以便于form表单提交数据--> <input type="hidden" name="image" value=""> </label> <label class="fileuploading hide" ></label> </p> <p class="blank15"></p> <!--上传成功后图片会在这里显示否则是默认图片--> <img id="image" src="/Public/images/empty_thumb.gif" />
Erklären Sie:
upd_file(this,'image_file') ist unverzichtbar
Die versteckte Eingabe wird verwendet, um den Bildpfad nach erfolgreichem Upload zuzuweisen, damit das Formular Daten übermitteln kann
Bearbeiten Sie als Nächstes das Javascript-Skript in HTML Um die Lieferung und Übermittlung zu erleichtern, erstellen Sie einfach die Methode app_upload_image()
<script>
function upd_file(obj,file_id){
$("input[name='"+file_id+"']").bind("change",function(){
$(obj).hide();
$(obj).parent().find(".fileuploading").removeClass("hide");
$(obj).parent().find(".fileuploading").removeClass("show");
$(obj).parent().find(".fileuploading").addClass("show");
$.ajaxFileUpload
(
{
url:'/index.php/home/avatar/app_upload_image',//上传图片处理文件
secureuri:false,
fileElementId:file_id,
dataType: 'json',
success: function (data, status)
{
$(obj).show();
$(obj).parent().find(".fileuploading").removeClass("hide");
$(obj).parent().find(".fileuploading").removeClass("show");
$(obj).parent().find(".fileuploading").addClass("hide");
if(data.status==1)
{
$("#image").attr("src",data.thumb_url+"?r="+Math.random());
$("input[name='image']").val(data.url);//返回json后将隐藏input赋值
//$("#img_url").html('<input type="hidden" name="img_url" value="'+ path.path +'" />');
}
else
{
$.showErr(data.msg);
}
},
error: function (data, status, e)
{
$.showErr(data.responseText);;
$(obj).show();
$(obj).parent().find(".fileuploading").removeClass("hide");
$(obj).parent().find(".fileuploading").removeClass("show");
$(obj).parent().find(".fileuploading").addClass("hide");
}
}
);
$("input[name='"+file_id+"']").unbind("change");
});
}
<script>
OK in der Bildfunktion
function app_upload_image($maxSize=52428800){
$id=session('id');
$config=array(
'rootPath' =>'Upload', //文件上传保存的根路径
'savePath' =>'/avatar/',
'exts' => array('jpg', 'gif', 'png', 'jpeg','bmp'),
'maxSize' => $maxSize,
'autoSub' => true,
);
$upload = new \Think\Upload($config);// 实例化上传类
$z = $upload->uploadOne($_FILES['image_file']);
if($z) {
//拼接图片的路径名
$img='/Upload'.$z['savepath'].$z['savename'];
$_POST['image_file']=$img;
//获取上传图片绝对路径
$imgsrc=$_SERVER['DOCUMENT_ROOT'].__ROOT__.$_POST['image_file'];
$image = new \Think\Image();
$image->open($imgsrc);
//将图片裁剪为400x400并保存为corp.jpg
$image->thumb(205, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($imgsrc);
$this->ajaxReturn(array("thumb_url"=>$img,"url"=>$img,"status"=>1));
}
}
thikphp. Lassen Sie mich Ihnen zunächst sagen, dass das Programm nicht ausgeführt wird, wenn ajaxfileupload.js einen Fehler meldet Ihr Programm meldet einen Fehler. Überprüfen Sie Ihren Ajaxfileupload. Handelt es sich um ein Problem mit der Dateiversion?