Member Avatar for WaleedaaN

hello,

i make a programing a code for uploading files on array but its not work fine and im working for 15day with it i tried so i need help please

i explain my idea maybe you have and ready code,

i have script php for article any user can post

so on click "new post"

show a box like twitter when you want tweet anything from website

i do the box code is working good.

i want the idea post like twitter:
i want the textarea with max 500 litter's not 140
and add files like twitter preview images before upload or cancel it and max 3 images to upload
if you can do better for me can add any file type i set it and if image preview small image
if another files show any image i set if video mp4 show small image and when click can see before upload any file

the idea its like twitter post on pc

but i need upgrade it to add any files i set

thanks

  • 2 Contributors
  • 3 Replies
  • 131 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by WaleedaaN
Member Avatar for WaleedaaN

i do this code with html

<html dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ar-kw">
<title>اضاف حدث</title>



<style>

.thumb {
height:60px;
width:60px;
padding:2px;
margin: 5px;
border:1px solid #dedede;
}



input.file-upload{
display: none;    
}

.image-upload {
    cursor: pointer;
}

.remove_img_preview {
    position:relative;
    top:-6px;
    right:20px;
    background:black;
    color:white;
    border-radius:50px;
    font-size:0.9em;
    padding: 0 0.3em 0;
    text-align:center;
    cursor:pointer;
}
.remove_img_preview:before {
    content: "x";
}
</style>

<script>
$(function() {
    $('.image-upload').on('click', function() {
        $('.file-upload').click();
    });
});

</script>

</head>

<body>
<div align="center">
    <table border="0" width="600" align="left" dir="rtl" cellspacing="0" cellpadding="0">
 <form action="?posts=add" method="POST" enctype="multipart/form-data">
        <tr>
            <td align="center" colspan="2"><textarea rows="2" name="article_text" cols="20" class="article_box"  placeholder="الحد الاقصى 500 حرف"></textarea></td>
        </tr>
                <tr>
            <td align="left" colspan="2"><output id="list"></output></td>
        </tr>

        <tr>     

            <td align="right" width="50%">


<input type="submit" class="submit_article" value="ارسل الحدث" name="B1" title='رفع ملفات وصور وفيديو' id="upload">
</td>

            <td align="left" width="50%">
            <input type="file" id="files" name="image_file_arr[]" class="file-upload" accept="image/x-png, image/jpeg" multiple/>
<img class="image-upload" border='0' src="images/upload_file.png" title="اضافة صور"/>
</td>
    </tr>

        <tr>
            <td align="left" colspan="2">
&nbsp;</td>
        </tr></form>
    </table>

</div>

<script>
var count=0;
    function handleFileSelect(evt) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 3 || count>3) {
            alert("المسموح به 3 صور فقط");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
            alert('الملف الذي تم اختياره غير مسموح فقط - JPG, PNG');
                continue;
            }
            var reader = new FileReader();

            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<span class="remove_img_preview"></span><img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }

    $('#files').change(function(evt){
        handleFileSelect(evt);
    });  

    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();

        count--;
    });

</script>

</body>


</html>

now when i send data to php file
only get last one file i select not all images i selected

Member Avatar for pixelsoul

Being able to view your PHP code will most likely be relevant to help with this.

Member Avatar for WaleedaaN

this is php code

$storeFolder = 'user_media/';   //2


if(isset($_FILES['image_file_arr'])){
foreach($_FILES['image_file_arr']['tmp_name'] as $key => $tmp_name)
{
    $file_name = $key.$_FILES['image_file_arr']['name'][$key];
    $file_size =$_FILES['image_file_arr']['size'][$key];
    $file_tmp =$_FILES['image_file_arr']['tmp_name'][$key];
    $file_type=$_FILES['image_file_arr']['type'][$key];  
move_uploaded_file($file_tmp,"$storeFolder".time().$file_name);
    echo "file: $file_name <br />";
}

}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.