ช่วยแนะนำวิธี ให้ uploadify แสดงรูป ตัวอย่างเมื่อกดเลือกรูป ด้วยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ช่วยแนะนำวิธี ให้ uploadify แสดงรูป ตัวอย่างเมื่อกดเลือกรูป ด้วยครับ

ช่วยแนะนำวิธี ให้ uploadify แสดงรูป ตัวอย่างเมื่อกดเลือกรูป ด้วยครับ
ช่วยแนะนำวิธี ให้ uploadify แสดงรูป ตัวอย่างเมื่อกดเลือกรูป ด้วยครับ ถ้าเลือกแล้ว ไม่เอาให้กดยกเลิกได้ ด้วย ทำยังไงครับ

ผมเอาอ่าน  doc  แล้ว ไม่เข้าใจครับ
โค้ดผม เอามาจากที่โหลดโค้ด

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>UploadiFive Test</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jquery.uploadify.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <style type="text/css">
    .form-create {
        width: 400px;
        border: 1px solid #000000;
        padding: 15px;
    }
    .group {
        margin: 5px 0;
         
    }
    .group label {
        display: inline-block;
        width: 100px;
    }
 
    </style>
</head>
 
<body>
     
    <div class="form-create">
        <form action="" method="post" enctype="multipart/form-data">
            <div class="group">
                <label for="name">ตั้งชื่อสินค้า:</label>
                <input type="text" value="" maxlength="50" name="name" id="name">
            </div>
            <div class="group">
                <label for="region">รายละเอียดสินค้า:</label>
                <textarea name="detail"></textarea>
            </div>
            <div class="group">
                <label >รูปภาพสินค้า:</label>
                <input id="file_upload" name="file_upload" type="file" multiple="true">
            </div>
                        <div class="group">                     
                          
                             <input type="submit" value="ตกลง" name="create">
                         </div>
                     
 
        </form>
    </div>
 
    <script type="text/javascript">
    <?php $timestamp = time();?>
    $(function() {
        $('#file_upload').uploadify({
            'formData'     : {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
            },
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php',
            'cancelImg': 'cancel.png',
            'fileTypeExts' : '*.gif; *.jpg; *.png',
            'multi'      : true,
 
        });    
 
    });
    </script>
 
</body>
</html>


ต้องเพิ่มในส่วนให้ครับ
แล้ว ผมอยากให้ กดปุ่ม  submit - ของ form แล้ว ค่อย อัพภาพ พร้อมข้อมูลที่กรอกนะครับ ช่วยแนะนำด้วยครับ
ขอบคุณครับ


Wowowow 13-09-2014 10:51:11

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลองตัวนี้เป็นแนวทาง 

แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย 


ninenik 13-09-2014
 ความคิดเห็นที่ 2
ขอถามเพิ่มครับ จากตัวอย่างที่ให้เป็นแนวทางนะครับ
ถ้า กรณีที่ เลือกรูป แล้ว 1 รูป แล้ว อยาก กดเพิ่ม รูป อีก  กดเลือก รูป ใหม่ เลย ต้องทำยังไงครับ 
ตัวอย่างเหมือนต้องเลือกในครั้งเดียวให้ครบเลย นะครับ



wowowow 14-09-2014 22:39
 ความคิดเห็นที่ 3
ให้เข้าใจแบบนี้ว่า การเลือกแบบ input file เราไม่สามารถเลือกไฟล์เพิ่มเข้าไปได้ ต้องเลือกครั้งเดียว
แต่ถ้าใช้ html5 จะใช้วิธีการ drop ไฟล์ โดยจะมีการสร้าง Filelist object แล้วสามารถอัพโหลดแบบ ajax ได้

แต่ก็สามารถประยุกต์ เอาได้ โดยใช้วิธีเพิ่ม input file เข้าไปแทน
ดูตัวอย่าง 


บันทึกข้อมูล

Name :
Picture :
Upload File




โค้ดตัวอย่างการประยุกต์

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        .drop-area{
          width:100px; height:25px;
          border: 1px solid #999; text-align: center;
          padding:10px; cursor:pointer;
        }
        #thumbnail img{width:100px;height:100px;margin:5px;}
        canvas{border:1px solid red;}   
    </style>
</head>
<body>
 
    <br> 
    <div style="margin:auto;width:80%;"> 
        <h3> บันทึกข้อมูล</h3>  
        <form class="form" id="myFrom" method="post" action="show_data.php"  role="form" enctype="multipart/form-data">   
            <div class="form-group"> 
               <lable class="control-label">Name : </lable> 
                <input type="text" autocomplete="off" class="form-control" name="name"> 
            </div> 
            <div class="form-group"> 
               <lable class="control-label">Picture : </lable> 
            <div id="upload" class="btn btn-info">
               Upload File
            </div>
            <div id="thumbnail"></div>              
            </div> 
            <button type="submit"  class="btn btn-primary">เพิ่มข้อมูล</button>            
        </form> 
        <br> 
         
    </div>
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" >
$(function () {
 
 
    $("#upload").on("click",function(e){
        var objFile= $("<input>",{
           "class":"file_upload",
            "type":"file",
            "multiple":"true",
            "name":"file_upload[]",
            "style":"display:none",
                change: function(e){
                    var files = this.files
                    showThumbnail(files)   
                }
        });
        $(this).before(objFile);
        $(".file_upload:last").show().click().hide();
        e.preventDefault();
    });
 
    function showThumbnail(files){
 
    //    $("#thumbnail").html("");
        for(var i=0;i<files.length; i++){
            var file = files[i]
            var imageType = /image.*/
            if(!file.type.match(imageType)){
                //     console.log("Not an Image");
                continue;
            }
 
            var image = document.createElement("img");
            var thumbnail = document.getElementById("thumbnail");
            image.file = file;
            thumbnail.appendChild(image)
 
            var reader = new FileReader()
            reader.onload = (function(aImg){
                return function(e){
                    aImg.src = e.target.result;
                };
            }(image))
 
            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload= function(){
                ctx.drawImage(image,100,100)
            }
        } // end for loop
 
    } // end showThumbnail
 
 
     
     
});
 </script>   
</body>
</html>


ninenik 14-09-2014
 ความคิดเห็นที่ 4
สอบถามนิดนึงครับ ถ้าผมอยากได้ คำอธิบาย ใต้ภาพ ผมควรจะเพิ่ม text box ในส่วนไหนหรอครับ


KiMZuhuM 08-12-2016 17:17
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ