PHP/jQuery Image Uploader με custom fields πεδία

philos · 16 Ιουνίου 2016

Καλησπέρα παιδιά!

Αναζητώ κάποιον image uploader για php site, πχ βασισμένο σε jquery.

Θα με ενδιέφερε να έχει λειτουργία για drag n drop εικόνων για άμεσο ανέβασμα, αλλά και τη δυνατότητα, αφού ή πριν η κάθε εικόνα ανέβει, ο χρήστης να μπορεί εύκολα να συμπληρώσει κάποια πεδία για την τάδε εικόνα (custom fields) όπως πηγή, τίτλο κτλ.

Σκεφτόμουν τον jQuery File Upload, ωστόσο κολλάω στο ότι δεν διαθέτει custom text πεδία.

Καμιά ιδέα;

WebDevGr · 16 Ιουνίου 2016

Δοκίμασε κι αυτόν http://plugins.krajee.com/file-input/demo έχει αρκετές επιλογές παραμετροποίησης

philos · 24 Ιουνίου 2016

Το δουλεύω εδώ και κάποιες μέρες, ευχαριστώ πολύ!!

Άλλη μια ερώτηση: υπάρχει κάποιο plugin σε javascript/jquery που να μου επιτρέπει να φτιάξω μια φόρμα στην οποία προσθέτω youtube videos?

Συγκεκριμένα έχω στο μυαλό μου να υπάρχει ένα text field όπου εισάγεις ένα youtube video url, πατάς μετά ένα κουμπάκι "Add" ξέρω γω, και το βίντεο προστίθεται στην html φόρμα μαζί με την εικόνα - preview του. Το ζητούμενο είναι στο τέλος όταν ο χρήστης κάνει submit τη φόρμα, να σταλθούν σε php αρχείο όλα τα youtube urls που πρόσθεσαι. Καμιά ιδέα;

s3cure · 25 Ιουνίου 2016

Το δουλεύω εδώ και κάποιες μέρες, ευχαριστώ πολύ!!

Άλλη μια ερώτηση: υπάρχει κάποιο plugin σε javascript/jquery που να μου επιτρέπει να φτιάξω μια φόρμα στην οποία προσθέτω youtube videos?

Συγκεκριμένα έχω στο μυαλό μου να υπάρχει ένα text field όπου εισάγεις ένα youtube video url, πατάς μετά ένα κουμπάκι "Add" ξέρω γω, και το βίντεο προστίθεται στην html φόρμα μαζί με την εικόνα - preview του. Το ζητούμενο είναι στο τέλος όταν ο χρήστης κάνει submit τη φόρμα, να σταλθούν σε php αρχείο όλα τα youtube urls που πρόσθεσαι. Καμιά ιδέα;

Δεν ξερω πως γίνεται με JS/NodeJs αλλα με php υλοποιείται πολύ εύκολα. Που θα αποθηκεύονται τα δεδομένα;

philos · 25 Ιουνίου 2016

Λοιπόν, δοκίμασα το Bootstrap File Input, όμως δεν με κάλυψε καθώς δεν έχει sort / rearrange των αρχείων όταν τα πρωτοανεβάζεις (λέει κιόλας ότι αυτή η λειτουργία αφορά μόνο το initial preview).

Οπότε είμαι σε αναζήτηση ενός file upload με α)drag n drop αρχείων, β) sort/rearrange και γ) να φαίνεται ένα preview των εικόνων και δ) αν έχει και τη δυνατότητα κάποιων extra fields - πχ να δίνεις τίτλο ή description σε μια εικόνα, καλώς!

Βασικά μόνο για image uploader των θέλω με PHP.

Δεν ξερω πως γίνεται με JS/NodeJs αλλα με php υλοποιείται πολύ εύκολα. Που θα αποθηκεύονται τα δεδομένα;

Τελικά έφτιαξα στα γρήγορα το ακόλουθο.
Ίσως θα με ενδιέφερε αν μπορούσα να βάλω sort / rearrange με το ποντίκι και - προφανώς να στέλνονται και τα video url/ids με τη σχετική σειρά στην PHP $_POST. Έχετε καμιά ιδέα;

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function youtube_parser(url)
{
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
}

function delete_video(videoid)
{
   $("#" + videoid).html('');
}

function add_youtubevideo()
{
   var geturl = $("#youtubeurl").val();
   var youtubevideoid = youtube_parser(geturl);
   
   if (youtubevideoid)
   {
      $("#videos").html($("#videos").html() + '<div class=\"video-box\" id=\"' + youtubevideoid + '\"><div><img src=\"http://img.youtube.com/vi/' + youtubevideoid + '/2.jpg\"><span>' + geturl + '</span><input type=\"hidden\" name=\"videos[]\" value=\"' + youtubevideoid + '\"></div><div><a href=\"#\" onclick="delete_video(\'' + youtubevideoid + '\');">DELETE</a></div></div>');
      $("#youtubeurl").val('');
   }
   else
   {
      alert('Please specify a correct YouTube Video URL!');
   }
}
</script>

</head>
<body>
<input type="text" style="width: 350px;" id="youtubeurl" placeholder="Copy and paste a YouTube Video URL" /><input type="button" class="button" onclick="add_youtubevideo();" value="ADD" />

<div id="videos"></div>

</body>
</html>

Σύνδεση

PHP/jQuery Image Uploader με custom fields πεδία

Προτεινόμενες αναρτήσεις

philos

WebDevGr

philos

s3cure

philos

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση