新浦京81707con > 注册购买 > jquery在线切图代码,php图片上传代码

原标题:jquery在线切图代码,php图片上传代码

浏览次数:95 时间:2019-10-03

php jquery在线切图代码[防dedecms]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" xml:lang="fr" lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Cropper</title>
  <!-- css -->
  <link rel="stylesheet" type="text/css" href="" />
  <link rel="stylesheet" type="text/css" href="" />
  <link rel="stylesheet" type="text/css" href="" />
  <!-- js -->
  <script type="text/javascript" src=";
  
  <style type="text/css">
   a:link, a:visited, a:active{
    color: #000;
    text-decoration: none;
    font-weight: bold;
   }
   
   a:hover{
    color: #fff;
    background-color: #000;
   }
   
   #hd{
    font-size: 2em;
    font-weight: bold;
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin: 10px 0 10px 0;
   }
   
   #uploadForm, #downloadLink{
    text-align: center;
   }
   
   #imageContainer{
    margin: 20px 0px 20px 0;
   }
   
   #ft{
    margin-top: 10px;
    padding-top: 10px;
    border-top:1px solid #ccc;
    text-align: center;
   }
  </style>
  
  <script type="text/javascript">
   uploader = {
    carry: function(){
     // set form
     YAHOO.util.Connect.setForm('uploadForm', true);
     // upload image
     YAHOO.util.Connect.asyncRequest('POST', 'upload.php', {
      upload: function(o){
       // parse our json data
       var jsonData = YAHOO.lang.JSON.parse(o.responseText);
       
       // put image in our image container
       YAHOO.util.Dom.get('imageContainer').innerHTML = '<img id="yuiImg" src="' jsonData.image '" width="' jsonData.width '" height="' jsonData.height '" alt="" />';
       
       // init our photoshop
       photoshop.init(jsonData.image);
       
       // get first cropped image
       photoshop.getCroppedImage();
      }
     });
    }
   };
      
   photoshop = {
    image: null,
    crop: null,
    //url: null,
    
    init: function(image){
     // set our image
     photoshop.image = image;
     
     // our image cropper from the uploaded image
     photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg');
     photoshop.crop.on('moveEvent', function() {
      // get updated coordinates
      photoshop.getCroppedImage();
     });
    },
    
    getCroppedImage: function(){
     var coordinates = photoshop.getCoordinates();
     var url = 'crop.php?image=' photoshop.image '&cropStartX=' coordinates.left '&cropStartY=' coordinates.top '&cropWidth=' coordinates.width '&cropHeight=' coordinates.height;
     YAHOO.util.Dom.get('downloadLink').innerHTML = '<a href="' url

允许客户以AJAX的方法上传图片
·允许客商选取图片的肯定区域
·最后,提供贰个回降后图片的下载地址

 代码如下

  • '">download cropped image</a>';
        },
        
        getCoordinates: function(){
         return photoshop.crop.getCropCoords();
        }
       };
       
       // add listeners
       YAHOO.util.Event.on('uploadButton', 'click', uploader.carry);
      </script>
     </head>
     <body class="yui-skin-sam">
      <div id="doc4" class="yui-t7">
       <div id="hd">
        AJAX image cropper - YUI-based
       </div>
       
       <div id="bd">
        <form action="upload.php" enctype="multipart/form-data" method="post" name="uploadForm" id="uploadForm">
         Image : <input type="file" name="uploadImage" id="uploadImage" />
         <input type="button" id="uploadButton" value="Upload"/>
        </form>
        
        <div id="imageContainer"></div>
        
        <div id="downloadLink"></div>
       </div>
       
       <div id="ft">
        <a href=" Blog</a>
       </div>
      </div>
     </body>
    </html>
    上面为index.php文件
    依据x,y,来用php重新绘制

我们就要用到四个公文

 define('max', 2);
 
 mysql教程_connect('localhost', 'your mysql username', 'your mysql password');
 mysql_select_db('your mysql database');
 
 switch ($_post['action']) {
  case 'upload':
  
   $file = $_files['file']['tmp_name'];
   $filename = $_files['file']['name'];
   
   if($file) {
   
    $max = max * 1024 * 1024;
    $q = mysql_query("select * from `uploads` order by `batch` desc limit 1");
    $r = mysql_fetch_assoc($q);
    $batch = $r['batch'];
    
    if($filename == 'upload.zip') {
    
     $zip = zip_open($file);

<?php
 // get variables
 $imgfile = $_GET['image'];
 $cropStartX = $_GET['cropStartX'];
 $cropStartY = $_GET['cropStartY'];
 $cropW = $_GET['cropWidth'];
 $cropH = $_GET['cropHeight'];

·index.php - 包涵图表上传表单以及剪切分界面
·upload.php - 提供上传成效
·crop.php - 提供剪切效率

     if ($zip) {
     
      while ($zip_entry = zip_read($zip)) {
       
       $size = zip_entry_filesize($zip_entry);
       
       $name = zip_entry_name($zip_entry);
       
       $type = substr(strrchr($name, '.'), 1);
       
       if (zip_entry_open($zip, $zip_entry, "r")) {
       
        $content = zip_entry_read($zip_entry, zip_entry_filesize($zip_entry));
        zip_entry_close($zip_entry);
         
       }
    
       if ($size > $max) {
       
        header('location: ./?error=4');
        exit;
        
       }
       
       $error = true;
       
       if ($type == 'gif' && $error) {
       
        $error = false;
        
       }
       
       if ($type == 'png' && $error) {
       
        $error = false;
        
       }
       
       if ($type == 'jpg' && $error) {
       
        $error = false;
        
       }
       
       if ($type == 'jpeg' && $error) {
       
        $error = false;
        
       }
       
       if ($error) {
       
        header('location: ./?error=2');
        
       } else {
       
        $id = 1;
        $batch2 = $batch 1;
        
        while (file_exists("uploads/$id/$name")) {
        
         $id ;
         
        }
        @mkdir("uploads/$id");
        
        $fp = @fopen("uploads/$id/$name", "w");
        
        if (@fwrite($fp, $content)) {
        
         $q = mysql_query("insert into `uploads` (`file`, `batch`) values ('uploads/$id/$name', '$batch2')");
         $id = mysql_insert_id();
         
        } else {
        
         header('location: ./?error=3');
         
        }
        
        fclose($fp);
        
       }
     
      }
      
      header('location: ./?batch=' . $batch2);
      
      zip_close($zip);
     
     }
    
    } else {
    
     if (filesize($file) > $max) {
     
      header('location: ./?error=4');
      exit;
      
     }
     
     $error = true;
     
     if (@imagecreatefromjpeg($file) && $error) {
     
      $error = false;
      
     }
     
     if (@imagecreatefromgif($file) && $error) {
     
      $error = false;
     }
     
     if (@imagecreatefrompng($file) && $error) {
     
      $error = false;
      
     }
     
     if ($error) {
     
      header('location: ./?error=2');
      
     } else {
     
      $id = 1;
      $batch = $batch 1;
      
      while (file_exists("uploads/$id/$filename")) {
      
       $id ;
       
      }
      @mkdir("uploads/$id");
      
      if (@move_uploaded_file($file, "uploads/$id/$filename")) {
      
       $q = mysql_query("insert into `uploads` (`file`, `batch`) values ('uploads/$id/$filename', '$batch')");
       $id = mysql_insert_id();
       header('location: ./?image=' . $id);
       
      } else {
      
       header('location: ./?error=3');
       
      }
      
     }
    
    }
    
   } else {
   
    header('location: ./?error=1');
   
   }
   
   exit;
   
  break;
 }
 
 header('content-type: text/html; charset=iso-8859-1');
 ob_start('rewrite');
 function rewrite ($buffer) {
  $host = $_server['http_host'];
  $path = dirname($_server['php_self']);
  $absolute = "";
  return preg_replace('#(href|src|action)="/#', "1="$absolute", $buffer);
 }
 
?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ";
 <html xmlns=";
 <head>
  <title>jpegr - share photos instantly</title>
  <meta name="description" content="upload and share photos and images instantly, on jpegr.com" />
  <meta name="keywords" content="upload, upload images, share photos, photo sharing, image uploader" />
  <link href="/css教程/main.css" rel="stylesheet" />
  <script src="/mint/?js" type="text/网页特效"></script>
  <script src="/js/nb-object.js" type="text/javascript"></script>
 </head>
 <body>
  <h1><a href="" title="goto jpegr home"><img src="/img/logo.gif" alt="jpegr" /></a></h1>
  <div id="menu">
   <form method="post" action="/" enctype="multipart/form-data" class="right">
    <input type="hidden" name="action" value="upload" />
    <label for="quick">quick upload</label>
    <input type="file" name="file" size="10" id="quick" />
    <input type="submit" value="upload" class="button" />
   </form>
   <a href="/">upload</a>
   <a href="/help/">help</a>
   <a href="/terms-of-service/">terms of service</a>
  </div>
  
<?php

 // Create two images
 $origimg = imagecreatefromjpeg($imgfile);
 $cropimg = imagecreatetruecolor($cropW,$cropH);

从本领角度看,流程如下所示:

 // recently uploaded query
 //$q = mysql_query('select * from `uploads` order by `id` desc limit 15');

 // Get the original size
 list($width, $height) = getimagesize($imgfile);

1.客户上传文件(index.php)
2.index.php将上传的图形POST到upload.php以拍卖上传图片程序,重回JSON数据包涵图片名,长和宽。
3.依据JSON里的数目和innerHTML,大家将图纸放在页面上
4.初始化javascript细分工具
5.生成下载连接(crop.php)

 $q = mysql_query('select count(`id`) as `count` from `uploads`');
 $r = mysql_fetch_assoc($q);
 
?>
  <div id="main">
   <h2 class="right"><?php echo number_format($r['count']); ?> <strong>images hosted</strong></h2>
   
<?php

 // Crop
 imagecopyresized($cropimg, $origimg, 0, 0, $cropStartX, $cropStartY, $width, $height, $width, $height);

让大家来看看index.php

 if ($_get['p'] == 'help') {
 
?>
   <h2>help</h2>
   <div>
    <ul>
     <li>
      <strong>how do i upload an image?</strong><br />
      just use the quick upload form on the top, or goto the <a href="/">home page</a> to <a href="/">upload an image</a>.
     </li>
     <li>
      <strong>what does "you must select a file to upload!" mean?</strong><br />
      this means that you clicked <strong>upload</strong> without selecting an image file.
     </li>
     <li>
      <strong>what does "that is a not a valid jpeg, gif, or png image." mean?</strong><br />
      this means that you uploaded a file, but it was not a jpeg, gif, or png image.
     </li>
     <li>
      <strong>what does "there was a problem with the server, and we were unable to upload your image." mean?</strong><br />
      this means your file was accepted, but it did not get saved, you will need to <a href="/">try again</a>, or <a href="/">upload another image</a>.
     </li>
     <li>
      <strong>what does "the file you selected was too big, <em><?php echo max; ?>mb</em> is the maximum." mean?</strong><br />
      this means that you tried to upload a file that was too big.
     </li>
    </ul>
   </div>
<?php

 // force download nes image
 header("Content-type: image/jpeg");
 header('Content-Disposition: attachment; filename="'.$imgfile.'"');
 imagejpeg($cropimg);

index.php是大家的机要文件,客商通过他来上传和下载图片。

 } elseif ($_get['p'] == 'terms-of-service') {
 
?>
   <h2>terms of service</h2>
   <div>
    <strong>when you upload to jpegr you agree to the following</strong>;
    <ul>
     <li>you will not use jpegr to upload pornographic content, any violation of this agreement may result in ban, and immediate removal of content.</li>
     <li>you will not abuse jpegr's upload form.</li>
     <li>any violation may result in permanent ban.</li>
    </ul>
   </div>
<?php

 // destroy the images
 imagedestroy($cropimg);
 imagedestroy($origimg);
?>

我们需求YUI提供的以下多少个零件:
·yahoo-dom-event.js - 操作和分析DOM
·dragdrop - 基于图片剪切工具
·element - 基于图片剪切工具
·resize - 基于图片剪切工具
·connection - 为AJAX诉求, 此例通过AJAX上传
·json - 解析JSON
·imagecropper - 我们最重大的工具

 } else {
 
  if (is_numeric($_get['image'])) {
  
   $q = mysql_query("select * from `uploads` where `id` = '$_get[image]'");
   $r = mysql_fetch_assoc($q);
   $root_ = 'http://' . $_server['http_host'] . dirname($_server['php_self']) . '/';
   
?>
   <h2>here is your image</h2>
   <div>
    <a href="/<?php echo $r['file']; ?>">click here to view your image</a><br /><br />
    <label for="direct">direct link to your image</label><br />
    <input type="text" id="direct" value="<?php echo $root_ . $r['file']; ?>" onfocus="this.select();" /><br />
    <label for="share" style="font-weight: bold;">share with your friends</label><br />
    <input type="text" id="share" value="<?php echo htmlspecialchars("$root_?image=$r[id]"); ?>" onfocus="this.select();" /><br />
    <label for="html">post link to myspace or website</label><br />
    <input type="text" id="html" value="<?php echo htmlspecialchars("<a href="$root_"><img src="$root_$r[file]" alt="visit jpegr" /></a>"); ?>" onfocus="this.select();" /><br />
    <label for="forum">post to a forum</label><br />
    <input type="text" id="forum" value="<?php echo htmlspecialchars("[url=$root_][img]$root_$r[file][/img][/url]"); ?>" onfocus="this.select();" /><br />
    if you want to <a href="/">upload another image</a>, you can go back or use the form below!<br /><br />
   </div>
<?php

那边是图形上的,

理所当然大家要用到 Yahoo combo handling何况增加上边提到的台本和样式表:[code]<link rel="stylesheet" type="text/css"
href=""
/>
<link rel="stylesheet" type="text/css"
href=""
/>
<!-- js -->
<script type="text/javascript"
src=".
5.2/build/connection/connection-min.js&2.5.2/build/json/json-min.js"></script>
[/code]下一场客户一定会通过AJAX上传图片,所以大家在页面上加四个表单。[code]<form action="upload.php"
enctype="multipart/form-data" method="post" name="uploadForm"
id="uploadForm">
        Image :
<input type="file" name="uploadImage" id="uploadImage" />
<input type="button" id="uploadButton" value="Upload"/>
</form>
[/code]点击上传开关来激活上传程序。[code]// add listeners
YAHOO.util.Event.on('uploadButton', 'click', uploader.carry);[/code]平等,我们也亟需多个容器:
·imageContainer - 将饱含我们上传的图形
·downloadLink - 将包括下载连接[code]<div id="imageContainer"></div>
<div id="downloadLink"></div>
[/code]多少个容器事后将经过innerHTML更新

  }
  
  if (is_numeric($_get['batch'])) {
  
   $q = mysql_query("select * from `uploads` where `batch` = '$_get[batch]'");
   
?>
   <h2>viewing batch #<?php echo ($_get['batch']) ? $_get['batch'] : 0; ?></h2>
   <div>
    to view an image in full size, just click it.<br /><br />
   
<?php

<?php
 
 if(!empty($_FILES["uploadImage"])) {
    // get file name
  $filename = basename($_FILES['uploadImage']['name']);
  
  // get extension
    $ext = substr($filename, strrpos($filename, '.') 1);
    
    // check for jpg only
    if ($ext == "jpg") {
        // generate unique file name
     $newName = 'images/'.time().'.'.$ext;
     
     // upload files
         if ((move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName))) {
   
          // get height and width for image uploaded
          list($width, $height) = getimagesize($newName);
          
          // return json data
             echo '{"image" : "'.$newName.'", "height" : "'.$height.'", "width" : "'.$width.'" }';
         }
         else {
             echo '{"error" : "An error occurred while moving the files"}';
         }
    }
    else {
       echo '{"error" : "Invalid image format"}';
    }
 }
?>

AJAX上传
对此AJAX的上传,请参见Code Central上的学科

   while($r = mysql_fetch_assoc($q)) {

刚毅推荐此教程,笔者下载了示范代码,依照自个儿的需求改换了一丝丝,最终我搞了三个格外正确的JSON对象[uploader],它唯有一个情势carry。前者只是提交表单数据到三个点名的U昂CoraL。[code]uploader = {
        carry: function(){
                // set form
                YAHOO.util.Connect.setForm('uploadForm', true);
                // upload image
                YAHOO.util.Connect.asyncRequest('POST', 'upload.php', {
                        upload: function(o){
                                // parse our json data
                                var jsonData = YAHOO.lang.JSON.parse(o.responseText);

?>
    <a href="<?php echo $r['file']; ?>"><img src="<?php echo $r['file']; ?>" alt="image #<?php echo $r['id']; ?>" border="0" style="max-width: 75px;" /></a>
<?php

                                // put image in our image container

   }
   
?>
   <br /><br />
   
   <div id="slider">
    <h3>beta image slideshow</h3>
    <noscript>please turn on javascript to view our slideshows.</noscript>
    <div id="slide"></div>
   </div>
   
   <script type="text/javascript">
    
    <?php
     
     $qq = mysql_query("select * from `uploads` where `batch` = '$_get[batch]'");
     
     while($rr = mysql_fetch_assoc($qq)) {
 
    ?>
nb.slideshow.addimage('<?php echo $rr['file']; ?>');
    <?php
    
     }
       
    ?>
nb.slideshow.start();
    
   </script>
   
   </div>
   
   <h2>share this batch with your friends</h2>
   <div>
   
    <label for="share" style="font-weight: bold;">batch viewer</label><br />
    <input type="text" id="share" value=" echo ($_get['batch']) ? $_get['batch'] : 0; ?>" onfocus="this.select();" /><br />
    if you want to <a href="/">upload another batch</a>, you can go back or use the form below!<br /><br />
   </div>
<?php

本文由新浦京81707con发布于注册购买,转载请注明出处:jquery在线切图代码,php图片上传代码

关键词: 新浦京81707con

上一篇:一个简单的PHP投票程序源码,PHP网上调查系统

下一篇:没有了