久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區

標題: 圖片黏貼上傳代碼 [打印本頁]
作者: 邂逅驚鴻    時間: 2024-11-10 23:48
標題: 圖片黏貼上傳代碼


自己在谷歌搜索找到的，目前不知道如何使用有懂的希望告知一下。網頁端實現代碼

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <script type="text/javascript" src="../../../template/default/style/cat/jquery.min.js"></script>
</head>

<body>
<div id="Msg" contentEditable="true" style="width: 600px; height:600px;border: 1px solid pink;"></div>
<script>
        //查找 Msg 元素,檢測當粘貼時候,
        document.querySelector('#Msg').addEventListener('paste', function(e)
        {
                if (!(e.clipboardData && e.clipboardData.items)) {
                   return;
                 }
                 for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
                   var item = e.clipboardData.items;
                   console.log(item);
                   if (item.kind === "string") {
                         item.getAsString(function (str) {
                           console.log(str);
                           layer.msg("請粘貼圖片上傳", {
                                 icon: 2,
                                 shade: [0.3, '#000'],
                                 offset: '15px',
                                 time: 1000
                           })
                         })
                         $("#Msg").html(""); //jQuery方法一
                   } else if (item.kind === "file") {
                         var blob = item.getAsFile();
                         console.log('fff:');
                         console.log(blob);
                         if (blob.size === 0) {
                           return;
                         }
                         var data = new FormData();
                         data.append("image", blob);
                         $.ajax({
                           url: '/pastepic.php?ac=up_paste_img',
                           type: 'POST',
                           cache: false,
                           data: data,
                           processData: false,
                           contentType: false,
                           success: function (result) {
                                 console.log(result);
                                 //if (result.code == "0") {
                                   console.log(result.msg)
                                   //var html = "<img src=" + result.data + " width='100' height='100'>";
                                   //$("#Msg").html(html);
                                 //} else {
                                   console.log(result.msg)
                                 //}
                           }
                         });
                   }
                 }
        }, false);
</script>

</body>
</html>






服務器端php代碼
服務器端很簡單，直接使用discuzX3.5現成的上傳函數即可。

圖片處理函數：pic_upload($file, 'album', 40, 30, 2)

圖片保存在album文件夾，同時生成jpg格式的縮略圖。

<?php
// mod文件只能被入口文件引用，不能直接訪問
if(!defined('IN_DISCUZ')) {
        exit('Access Denied');
}
require_once libfile('function/discuzcode');
require_once libfile('function/home');

$ac = dhtmlspecialchars($_GET['ac']); // 獲取數據動作，g1:取得某邊界內，某類別的所有點


if ($ac == 'up_paste_img'){
    //服務器端生成圖片
        echo 'will receive up_paste_img';
        //echo $_FILES;
        //print_r(array_values($_FILES));

        if(!empty($_FILES)) {
                foreach($_FILES as $varname => $file) {
                        if($file['tmp_name']) {
                                $result = pic_upload($file, 'album', 40, 30, 2);
                                $pic = 'album/'.$result['pic'];
                                echo '<br/>';
                                echo $pic;
                               
                        }
                }
        }

        exit;               
}
elseif ($ac == 'blank'){
    // 網頁模板
        include_once template("ccc/pic_paste");
}

?>






歡迎光臨 Discuz! 官方交流社區 (http://www.9999xn.com/) Powered by Discuz! W1.0