上传图片使用Ajax imgur [英] Upload image to imgur using ajax
本文介绍了上传图片使用Ajax imgur的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在同一页上，从imgur加载图像，而不需要重新装载。我用 AJAX 来执行。
我想这样做，而不 AJAX ，并能正常工作，但它重新加载页面。所以我增加了以下AJAX code，而现在的形象不加载在所有。我在做什么错了，我怎么能解决这个问题？
$（文件）。就绪（函数（）{
功能的onSuccess（响应，状态）{
$（＃onsuccessmsg）HTML（状态：其中，B＆GT;+状态+'＆LT; / B＆GT;＆LT; BR＆GT;＆LT; BR＆GT;响应数据：＆LT; DIV ID =味精的风格=边界：5px的固体#CCC;填充：15px的;＆GT;+响应+'＆LT; / DIV＆GT;'）;
}
$（＃uploadform）。在（'提交'，函数（）{
VAR的选择= {
网址：$（本）.attr（行动），
成功：的onSuccess
};
$（本）.ajaxSubmit（选件）;
返回false;
}）;
}）;
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js"></script>
＆所述;脚本的src =http://malsup.github.io/jquery.form.js＆GT;＆所述; /脚本＆GT;
＆LT;形式的行动=upload.php的方法=POSTENCTYPE =的multipart / form-data的ID =uploadform＆GT;
＆LT;输入类型=文件名称=IMG/＆GT;
＆LT;输入类型=提交名称=提交值=上传/＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆gt;消息：
＆LT; DIV ID =onsuccessmsg的风格=边界：5px的固体#CCC;填充：15px的;＆GT;＆LT; / DIV＆GT;
＆LT; /形式GT;
下面是PHP的code：
upload.php的
＆LT; PHP
$ IMG = $ _ FILES ['IMG'];
如果（使用isset（$ _ POST [提交]））{
如果（$ IMG ['名称'] ==''）{
回声＆其中; H2＆gt;一种图像请＆lt; / H2＆gt;中;
}其他{
$文件名= $ IMG ['tmp_name的值'];
$ CLIENT_ID =我-ID;
$处理=的fopen（$文件名，R）;
$数据= FREAD（$处理，档案大小（$文件名））;
$ pvars =阵列（'形象'=＆GT; base64_en code（$数据））;
$超时= 30;
$卷曲= curl_init（）;
curl_setopt（$卷曲，CURLOPT_SSL_VERIFYPEER，假）;
curl_setopt（$卷曲，CURLOPT_URL，https://api.imgur.com/3/image.json'）;
curl_setopt（$卷曲，CURLOPT_TIMEOUT，$超时）;
curl_setopt（$卷曲，CURLOPT_HTTPHEADER，阵列（授权：客户ID'。$ CLIENT_ID））;
curl_setopt（$卷曲，CURLOPT_POST，1）;
curl_setopt（$卷曲，CURLOPT_RETURNTRANSFER，1）;
curl_setopt（$卷曲，CURLOPT_POSTFIELDS，$ pvars）;
$ OUT = curl_exec（$卷曲）;
curl_close（$卷曲）;
$ PMS = json_de code（$出来，真正的）;
$ URL = $ PMS ['数据'] ['链接'];
如果（$网址！=）{
回声＆LT; H2＆GT;上传，没有任何问题与LT; / H2＆gt;中;
回声＆LT; IMG SRC =$网址/＆gt;中;
}其他{
回声＆LT; H2＆GT;有一个问题＆LT; / H2＆gt;中;
回声$ PMS ['数据'] ['错误'];
}
}
}
？＆GT;
更新
以下是图像：AJAX请求/响应
解决方案
＆LT; PHP
如果（@ $ _ SERVER ['HTTP_REFERER']！）死亡（'不能直接访问'）;
$ IMG = $ _ FILES ['IMG'];
如果（$ IMG ['名称'] ==''）{
回声＆其中; H2＆gt;一种图像请＆lt; / H2＆gt;中;
}其他{
$文件名= $ IMG ['tmp_name的值'];
$ CLIENT_ID =我-ID;
$处理=的fopen（$文件名，R）;
$数据= FREAD（$处理，档案大小（$文件名））;
$ pvars =阵列（'形象'=＆GT; base64_en code（$数据））;
$超时= 30;
$卷曲= curl_init（）;
curl_setopt（$卷曲，CURLOPT_SSL_VERIFYPEER，假）;
curl_setopt（$卷曲，CURLOPT_URL，https://api.imgur.com/3/image.json'）;
curl_setopt（$卷曲，CURLOPT_TIMEOUT，$超时）;
curl_setopt（$卷曲，CURLOPT_HTTPHEADER，阵列（授权：客户ID'。$ CLIENT_ID））;
curl_setopt（$卷曲，CURLOPT_POST，1）;
curl_setopt（$卷曲，CURLOPT_RETURNTRANSFER，1）;
curl_setopt（$卷曲，CURLOPT_POSTFIELDS，$ pvars）;
$ OUT = curl_exec（$卷曲）;
curl_close（$卷曲）;
$ PMS = json_de code（$出来，真正的）;
$ URL = $ PMS ['数据'] ['链接'];
如果（$网址！=）{
回声＆LT; H2＆GT;上传，没有任何问题与LT; / H2＆gt;中;
回声＆LT; IMG SRC =$网址/＆gt;中;
}其他{
回声＆LT; H2＆GT;有一个问题＆LT; / H2＆gt;中;
回声$ PMS ['数据'] ['错误'];
}
}
？＆GT;
你不需要
如果（使用isset（$ _ POST [提交]））
在upload.php的
I'm trying to load an image from imgur on the same page, without reloading. I used ajax to perform that.
I tried doing it without ajax, and it works fine, but it reloads the page. So I added the following ajax code, and now the image doesn't load at all. What am I doing wrong, and how can I fix it?
$(document).ready(function() {
function onsuccess(response, status) {
$("#onsuccessmsg").html("Status :<b>" + status + '</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">' + response + '</div>');
}
$("#uploadform").on('submit', function() {
var options = {
url: $(this).attr("action"),
success: onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="uploadform">
<input type="file" name="img" />
<input type="submit" name="submit" value="Upload" />
<br/>
<br/>Message :
<div id="onsuccessmsg" style="border:5px solid #CCC;padding:15px;"></div>
</form>
Here's the php code:
upload.php
<?php
$img=$_FILES['img'];
if(isset($_POST['submit'])){
if($img['name']==''){
echo "<h2>An Image Please.</h2>";
}else{
$filename = $img['tmp_name'];
$client_id="my-id";
$handle = fopen($filename, "r");
$data = fread($handle, filesize($filename));
$pvars = array('image' => base64_encode($data));
$timeout = 30;
$curl = curl_init();
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image.json');
curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id));
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
$out = curl_exec($curl);
curl_close ($curl);
$pms = json_decode($out,true);
$url=$pms['data']['link'];
if($url!=""){
echo "<h2>Uploaded Without Any Problem</h2>";
echo "<img src='$url'/>";
}else{
echo "<h2>There's a Problem</h2>";
echo $pms['data']['error'];
}
}
}
?>
Update
Here's an image of: AJAX request / response
解决方案
<?php
if(!@$_SERVER['HTTP_REFERER']) die('No direct Access');
$img=$_FILES['img'];
if($img['name']==''){
echo "<h2>An Image Please.</h2>";
}else{
$filename = $img['tmp_name'];
$client_id="my-id";
$handle = fopen($filename, "r");
$data = fread($handle, filesize($filename));
$pvars = array('image' => base64_encode($data));
$timeout = 30;
$curl = curl_init();
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image.json');
curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id));
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
$out = curl_exec($curl);
curl_close ($curl);
$pms = json_decode($out,true);
$url=$pms['data']['link'];
if($url!=""){
echo "<h2>Uploaded Without Any Problem</h2>";
echo "<img src='$url'/>";
}else{
echo "<h2>There's a Problem</h2>";
echo $pms['data']['error'];
}
}
?>
you dont need
if(isset($_POST['submit']))
in upload.php
这篇关于上传图片使用Ajax imgur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
