atvērt file borowser

ziedinjsh · July 16, 2011

Sveiki, vai var uztaisīt ko tādu:

piem man ir div

<div id='avatar' class='file'>izvēlies bildi</div>

un uzspiežot uz viņa, viņš veic tādu pašu funkciju kā

<input type='file' name='avatar' class='file'>

Šitā man nestrādāja

$(document).ready(function() {
$(this).parents("#avatar").find("input[type='file' name='avatar']").trigger('click');
});

Paldies jau iepriekš!

Edited July 16, 2011 by ziedinjsh

Maris-S · July 16, 2011

Metode click() Mozillās un Operā nestrādās.

Paskaties šeit:

http://www.quirksmode.org/dom/inputfile.html

daGrevis · July 16, 2011

Izmanto, piemēram, Uploadify.

ziedinjsh · July 17, 2011

jā, esmu meiģinājis uzstādīt to uploadify, bet lāgā kaut kā nesanāk, un neticu ka tādam uploadam ir vajadzīgi tika daudz failu

ziedinjsh · July 17, 2011

nu tā.. it kā viss būtu salikts.. bet tikai kad izvēlos failu parāda augšupielādēšanās progres kurš stāv uz vietas un nekustās.. kapēc tās?

avatar_process.php

if (!empty($_FILES)) {
$data = mysql_fetch_array(mysql_query("SELECT * FROM users WHERE email='".$_SESSION['email']."'"))or die(mysql_error());

$folder = "../avatars/";
$image = mysql_real_escape_string($_FILES['avatar']['name']);
$tmp = mysql_real_escape_string($_FILES['avatar']['tmp_name']);
$type = mysql_real_escape_string($_FILES['avatar']['type']);
$size = mysql_real_escape_string($_FILES['avatar']['size']);

$iname = trim($data['username']);
$avatar = $iname."_".basename($_FILES['avatar']['name']);
$uploading = $folder.$iname."_".basename($_FILES['avatar']['name']);

$statuss = "ok";

if(empty($image)){
$error = "<div class='i-error'>Nav izvēlēts neviens fails!</div>";
	$statuss = "error";
}
if (!$type == "image/jpeg" || !$type == "image/jpg"){
$error = "<div class='i-error'>Nepareizs faila formāts</div>";
	$statuss= "error";
}
if(file_exists($data['avatar'])){
unlink($folder."/".$data['avatar']);
}

if($statuss<>"ok"){
echo $error;
}else{

$sql = mysql_query("UPDATE users SET avatar='$avatar' WHERE email='".$_SESSION['email']."'") or die(mysql_error());
if(move_uploaded_file($_FILES['avatar']['tmp_name'], $uploading)){

createAvatar70("../avatars/","../avatars/small/",70);
createAvatar200("../avatars/","../avatars/medium/",200);
createAvatar400("../avatars/","../avatars/",400);


}
header("Location: ../index.php?p=profile&profile=avatar");
}
}

Edited July 17, 2011 by ziedinjsh

foxsk8 · July 17, 2011

Nu reāli speciālos inputus var saveidot arī ar css, vienīgais, tur ir jāsataisa pa slāņiem viss, apkārt nāk divs, tam virsu relatīvas pozīcijas, apakšā inputs ar savām pozīcijām, utt...

Nu piemēram:

http://www.kavoir.com/2009/02/styling-file-upload-select-input-control-input-typefile.html

Protams, ja es pareizi esmu sapratis domu.

Grey_Wolf · July 17, 2011

Ja gribi tam failu upldam smuku dizainu, tad ir samērā hitrs risinajums.

Tam input file laukm ir jaabuut, bet viņs var būt CAURSPĪDĪGS ;)

1. tatad izveidojm

<input type="file" name="xxxxxx" id="fails"  onchange="paraadit(this.id,'id_2')">

, un nopozicionējam ar position: absalute, un norādam kurā slānī viņam but [ z-index: 999 ]

2. CSS uzliekam šādus atribūtus

-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;

tas ir padaram vīņu neredzmu

3. ZEM tā brofse butona izveideojam nepiecīešmo zīmējumu, vai jabkuru zitu dizaina elementu (pogu pēc izskatā kādu vēlies)

un nopozicinējam viņu ar position:absalute tieši zem brofse pogas ( izmantojot z-index:888) [vismaz 1 līmeni zemak nekā input laukam]

4. zem vile input teksta laucīņa , izveidojam parastu input type="text" ar id="id_2" lauku, (protams position absalute...)

5. izveidojam JS funkciju paraadit()

function paradit(id_x)
{
var kas=document.getElementById(id,id_2).value;  
document.getElementById(id_2).value=kas;   
return false;
}

--

tātad visam šmam murgam domai ir:

a) noslēp to file ievades lauku, bet atstāt vīņu aktīvu.

b) tad kad useris ir izvēlējies vajadzīgo faila ceļu , parādīt to userim

--

šāda shema strādā gandrīz uz visiem brauzeriem

pats esmu testējis

IE6- IE8

Opera, Firefox, Safari

---

P.S. lielākā problema ir tā ka katram brauzerim tā poga 'brofse' ir atšķirīgos lielumos :(

Edit:

apkārt nāk divs, tam virsu relatīvas pozīcijas, apakšā inputs ar savām pozīcijām, utt...

Inputs ir VIRSU, nevis apakšā. savādāk uz viņa nevarēs uzklikot, attiecīgi atvērt meklēšanas logu ...

Edited July 17, 2011 by Grey_Wolf

ziedinjsh · July 17, 2011

uztaisīju tā, bet lieta tāda ka uzspiežot uz to manis izveidotās pogas nekas nenotiek!

<form method='post' action='process/avatar_process.php' enctype='multipart/form-data'>
<p><input type='file' name='avatar' id='file'  onchange=\"show(this.id,'id_2')\" class='pfile'><div class='choseb'>Izvēlies failu</div></p>
<p><input type='text' id='id_2' style='width:400px;border:0px solid #ccc;position:absalute;'></p>
<p><input type='submit' name='addavatar' value='Pievienot' class='button'></p>
</form>

Grey_Wolf · July 17, 2011

uztaisīju tā, bet lieta tāda ka uzspiežot uz to manis izveidotās pogas nekas nenotiek!

<form method='post' action='process/avatar_process.php' enctype='multipart/form-data'>
<p><input type='file' name='avatar' id='file'  onchange=\"show(this.id,'id_2')\" class='pfile'><div class='choseb'>Izvēlies failu</div></p>
<p><input type='text' id='id_2' style='width:400px;border:0px solid #ccc;position:absalute;'></p>
<p><input type='submit' name='addavatar' value='Pievienot' class='button'></p>
</form>

1. kur ir tam file inputam CSS ?

2. kur ir lauka pozicionēšna

3. kur ir JS funkcija?

4. kāpēc pirms onchange pēdiņam ir slash (kas viņs likvidē)

5. tai tavai veidotaja poga ir jābūt ZEM īstās brofse pogas, (tādēļ jau tiek izmantos Positin: absalute un tie z-indexi )

reāli jau tiek spiests uz ISTĀS pogas, nevis uz tava lauka, kas tikai uzlikts smukumam, jo īstā poga ir NEREDZMA .

ezis · July 17, 2011

esmu par daG. variantu! Ar niecīgām zināšanām uzstādīju arī es. Nav tur tik daudz failu. + extra glītas fīčas.

daGrevis · July 17, 2011

2. CSS uzliekam šādus atribūtus

Hmmm... 'visibility: invisible;'?

daGrevis · July 17, 2011

esmu par daG. variantu! Ar niecīgām zināšanām uzstādīju arī es. Nav tur tik daudz failu. + extra glītas fīčas.

Nu plus tam štruntam ir tāds, ka var izvēlēties, ka, piemēram, ne tikai vienu failu reizē var augšupielādēt. Kaut vai simts... Var izvēlēties, ka rāda tādu kā "loading bar", kura Tu vari redzēt pašreizējo progresu failiem. Visādi sīki, bet noderīgi štruntiņi ir tajā štruntiņā. 0_o

Grey_Wolf · July 17, 2011

Hmmm... 'visibility: invisible;'?

nee caurspidīgums, Alpha kanls norada uz caurspīdigumu, tur varuzlikt arī daļēju - puscaurspīdīgu, ta ari jādara kamēr pieregulē atrašanās vietu.

Jo šjā gadījumā elements ir pilnībā aktīvs, ieskaitot ka aizņem tam paredzēto vietu etc., bet tikai caurspīdīgs.

esmu par daG. variantu! Ar niecīgām zināšanām uzstādīju arī es. Nav tur tik daudz failu. + extra glītas fīčas.

ne vienmēr tas der, jo ja prasīgs klients atsūtīs dizainu, tad nekādi pašdarbības gājieni neies cauri ...

(būs klients, kas skaidri norādīs, ka visam jāstrādā arī uz IE6, un stāstīt ka tas nav forši ir bezcerīgi,

atbilde būs: - nevari? Atradīšu kas var/māk.

Piedevām kad saprot ideju, uztaisīt ir pilnīgi elementāri, tik cik pāris rindiņas kodā.

Edited July 17, 2011 by Grey_Wolf

Sign In

atvērt file borowser

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation