本文介绍了上传图片使用Ajax imgur的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在同一页上,从imgur加载图像,而不需要重新装载。我用 AJAX 来执行。

我想这样做,而不 AJAX ,并能正常工作,但它重新加载页面。所以我增加了以下AJAX code,而现在的形象不加载在所有。我在做什么错了,我怎么能解决这个问题?

$(文件)。就绪(函数(){  功能的onSuccess(响应,状态){    $(#onsuccessmsg)HTML(状态:其中,B&GT;+状态+'&LT; / B&GT;&LT; BR&GT;&LT; BR&GT;响应数据:&LT; D​​IV ID =味精的风格=边界:5px的固体#CCC;填充:15px的;&GT;+响应+'&LT; / DIV&GT;');  }  $(#uploadform)。在('提交',函数(){    VAR的选择= {      网址:$(本).attr(行动),      成功:的onSuccess    };    $(本).ajaxSubmit(选件);    返回false;  });}); &LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js"></script>&所述;脚本的src =htt​​p://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; D​​IV 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 06:53