この記事では、JS HTML5マルチピクチャーのアップロードとプレビューの例の例を参照してください。特定のコンテンツは次のとおりです
メインアプリケーション
1。HTML5ファイルは複数のファイルを選択して複数のファイル情報を取得できます
2。XMLHTTPREQUESTオブジェクト、HTTP送信要求を送信します
3.各ファイルをFormDataに配置して送信します
4. readasdataurlを使用して、画像コンテンツを直接URLに変換し、IMGタグのSRCに配置し、プレビュー可能な画像を生成します。
HTML+CSS+JSコード
<！doctype html> <head> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <title>テストHTMLファイヤーリーダー</title> <スタイルtype = "text/css"> html、body、header、footer、div、ul、li、h1、h2、h3、h4、h5、h6、label、input、textarea、p、span、a {padding：0;マージン：0;} img {border：0;} em、strong {font-weight：normal;フォントスタイル：normal;} ul {list-style：none;} h1、h2、h3、h4、h5、h6 {font-weight：remorm; font-size：100％;} a、a：after {text-decoration：none;}。photo_wrap {clear：both;}。photo_wrap li {marve：10px;幅：150px;フロート：左;}。photo_box {height：150px;幅：150px;オーバーフロー：隠し;位置：相対;}。photo_box .img1 {height：150px;}。写真高さ：40px;幅：100px;フロート：左;}。btn {height：40px; Line-Height：40px;色：#fff;表示：ブロック;ボーダーラジウス：3px;テキストアライグ：センター;バックグラウンドカラー：＃ff5581; / *古いブラウザー */ background-image：-moz-linear-gradient（top、＃fa7b9c 0％、＃ff5581 100％）; / * ff3.6+ */ background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃fa7b9c）、カラーストップ（100％、＃ff5581））; / * chrome、safari4+ */ background-image：-webkit-linear-gradient（top、＃fa7b9c 0％、＃ff5581 100％）; / * chrome10+、safari5.1+ */ background-image：-o-linear-gradient（top、＃fa7b9c 0％、＃ff5581 100％）; / * Opera 11.10+ */ background-image：-ms-linear-gradient（top、＃fa7b9c 0％、＃ff5581 100％）; / * ie10+ */ background-image：線形勾配（下部、＃fa7b9c 0％、＃ff5581 100％）; / * w3c */ filter：progid：dmimmagetransform.microsoft.gradient（startcolorstr = '＃fa7b9c'、endcolorstr = '＃ff5581'、gradienttype = 0）; / * IE6-8 */ BOX-SHADOW：0 1PX 0 RGBA（255、255、255、0.3）Inset、0 1PX 2PX RGBA（0、0、0、0.3）;}。位置：絶対;上：0;左：0;}。btn_upload {width：100px;マージン：0 10px 10px; float：左;}。btn：hover、.btn_cur {background-color：＃fb99b1; / *古いブラウザー */ background-image：-moz-linear-gradient（top、＃fb99b1 0％、＃ff5581 100％）; / * ff3.6+ */ background-image：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃fb99b1）、カラーストップ（100％、## ff5581））; / * chrome、safari4+ */ background-image：-webkit-linear-gradient（top、＃fb99b1 0％、＃ff5581 100％）; / * chrome10+、safari5.1+ */ background-image：-o-linear-gradient（top、＃fb99b1 0％、＃ff5581 100％）; / *オペラ11.10+ */ background-image：-ms-linear-gradient（top、＃fb99b1 0％、＃ff5581 100％）; / * ie10+ */ background-image：線形勾配（下部、＃fb99b1 0％、＃ff5581 100％）; / * w3c */ filter：progid：dmimmagetransform.microsoft.gradient（startcolorstr = '＃fb99b1'、endcolorstr = '＃ff5581'、gradienttype = 0）; / * ie6-8 */}。file_input_wrap {position：absolute;上：0;左：0;幅：100px;高さ：40px;}。file_input_wrap label {width：100％;高さ：100％;表示：ブロック;不透明：0;カーソル：pointer;}。file_input_wrap input {opacity：0;フィルター：アルファ（不透明= 0）;/*ie8以下*/位置：絶対;トップ：7px;右：173px;カーソル：ポインター;幅：95px;}。photo_box .icon_pos {height：20px;幅：20px;表示：ブロック;位置：絶対;右：0;下：0;}。photo_box .loading {height：10px;表示：ブロック;位置：絶対;左：0;下：0; background-image：url（loading.gif）;}。sucess_icon {background-image：url（icons_01.png）;バックグラウンドポジション：0 0;}。error_icon {background-image：url（icons_01.png）;バックグラウンドポジション：-20px 0;} </style> </head> <body> <div> <a id = "j_add_pic" href = "javascript：;">画像</a> <div> <入力タイプ= "ファイル" Id = "ファイル" name = "file" = "eccept =" image/*"fileinfo id = "j_add_area"> </label> </div> </div> <a id = "j_upload" href = "javascript：;">起動アップロード</a> <div id = "j_photo_wrap"> <ul> </ul> </div> </body = "text/javascript" "" "" src = "jquery-1.7.2.min.js"> </script> <script = "text/javascript"> var img_index = new Array（）; function upload_img（）{var j = 0; img（）;関数IMG（）{// 1。 xmlhttprequestオブジェクトを作成するif（img_index.length> 0）{var singleimg = img_index [j]; var xmlhttp; if（window.xmlhttprequest）{// ie7+、firefox、chrome、opera、safari xmlhttp = new Xmlhttprequest; // Mozillarブラウザバグの特定のバージョンの場合の修正（xmlhttp.overridemimeType）{xmlhttp.OverridemimeType（ 'text/xml'）; }; } else if（window.activexobject）{// ie6、ie5 xmlhttp = new ActiveXObject（ "microsoft.xmlhttp"）; }; if（xmlhttp.upload）{// progress bar xmlhttp.upload.addeventlistener（ "progress"、function（e）{if（e.lengthcomputable）{var load_percent =（e.loaded /e.total） * 100; $（ '＃j_photo_wrap ul ul ul ul ul ul Ul li '）。eq（j）.find（'。loading '）。 // 2。 Callback function //onreadystatechange is the event handle function called every time the readyState property changes xmlhttp.onreadystatechange = function(e){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var json = eval('(' + xmlhttp.responseText + ')'); if（json.status == 1）{$（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。upload_result'）。 $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。loading'）。hide（）; $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。Icon_pos'）。addclass（ 'sucess_icon'）; } else {$（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。upload_result'）。 $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。loading'）。hide（）; $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。Icon_pos'）。addclass（ 'error_icon'）; }} else {$（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。upload_result'）。 $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。loading'）。hide（）; $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。loading'）。hide（）; $（ '＃j_photo_wrap ul li'）。eq（j）.find（ '。Icon_pos'）。addclass（ 'error_icon'）; } if（j <img_index.length -1）{j ++; img（）; }}}}; // 3。接続情報の設定// HTTP要求パラメーターを初期化しますが、リクエストを送信しないでください。 //最初のパラメーター接続方法は、2番目はURLアドレスであり、3番目のtrueは非同期接続です。デフォルトでは非同期接続です// post Method xmlhttp.open（ "post"、 "upload.php"、trueを使用してデータを送信します。 // 4。データの送信、サーバーとの対話を開始// HTTP要求を送信し、open（）メソッドに渡されたパラメーターを使用し、メソッドに渡されたオプションの要求を使用します。 trueの場合、文の送信はすぐに実行されます// false（同期）の場合、sendはサーバーデータが戻ってきた後にのみ実行されます// getメソッドはvar formdata = new formdata（）でコンテンツを必要としません。 formdata.append（ "filedata"、singleimg）; xmlhttp.send（formdata）; } //}}}}; $（ '＃j_upload'）。 $（ '＃j_add_area'）。hover（function（）{$（ '＃j_add_pic'）。addclass（ 'btn_cur'）;}、function（）{$（ '＃j_add_pic'）。removeclass（ 'btn_cur'）;}）; $（ '＃j_add_area'）。クリック（function（）{$（ '＃file'）。click（）;}）; function resize（img）{if（img.offsetheight> img.offsetwidth）{$（img）.removeclass（ 'img1'）。addclass（ 'img2'）; } else {$（img）.removeclass（ 'img2'）。addclass（ 'img1'）; }} function fileInfo（source）{var ireg = /image/.*./i; var files = source.files; var名、サイズ、タイプ。 for（var i = 0、f; f = files [i]; i ++）{name = f.name; size = f.size; type = f.type; if（！type.match（ireg））{$（ '＃j_photo_wrap ul'）。付録（ '<li> <div>'+name+'は画像ではありません<span> </span> <span> </span> </div> </div> </li>'）; } else {img_index.push（f）; if（size> 1048576）{$（ '＃j_photo_wrap ul'）。append（ '<li> <div>'+name+'は大きすぎてプレビュー<span> </span> <span> </span> </div> <div> </div> </li>'）; } else {if（window.filereader）{var fr = new fileReader（）; fr.onload =（function（f）{return function（e）{$（ '＃j_photo_wrap ul'）。append（ '<li> <div> <img onload = "resize（this）;" src = "'+" '+' "/> <span> </span> <span> </span> </div> </li> </li> fr.readasdataurl（f）; }}}}}}}; </script> </html>PHPはファイルコードを受信しました（ここではファイル名、タイプ、サイズのみを取得し、他の操作は実行されません）
<？php $ name = $ _files ['filedata'] ['name']; $ type = $ _files ['filedata'] ['type']; $ size = $ _files ['filedata'] ['size']; $ return = array（ "name" => $ name、 "type" => $ "、" size "=> $ size、" status "=> 1）; $ return = json_encode（$ return）; echo $ return;？>
既存の問題
1.サムネイルを生成するために、Readasdataurlはファイルのコンテンツを読み取るときにメモリを取ります。そのため、大きな画像がブラウザがスタックまたはクラッシュします。
2。アップロードはセグメンテーションでは処理されません
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。