htmljs上傳圖片

『壹』 HTML/CSS/JS實現QQ相冊上傳功能，就跟下面圖片中的樣子差不多的，重點是繼續添加圖片的實現，求高手

這個有點困難，不是10行20行代碼可以解決的。那起碼是一個工程.最好是網上找現成的類似的框架去改改。

『貳』 使用js+html+struts2能否實現圖片上傳

html為什麼無法與action中的屬性綁定？
struts2是根據屬性名稱來自動轉換類型的。
對於jsp和html來說應該是一樣的。

『叄』 用html, css, javascript ，怎麼讓用戶要麼選擇上傳自己的圖片，要不選擇在網頁出給出的圖片詳情見下

可以給文件上傳控制項再添加一個onclick事件啊，當點擊這個input時，把myimg的src賦值給cusInput，然後當onchange事件發生再把上傳後的圖片地址賦值給cusInput，這樣的話即使因為圖片路徑相同未觸發onchange事件，但onclick事件仍然發生了啊，cusInput仍然保留了上一次上傳的圖片路徑：

<inputtype="file"name="pic"onchange="change(event)"onclick="cusInput=document.getElementById('myimg').src">

『肆』 用html，js怎麼將本地圖片批量上傳，上傳前預覽，並可以選中某張圖片給他加旋轉效果。急求高手相救！

批量上傳？js就用Jquery上傳控制項吧（開源社區裡面有例子）。或者，用ckeditor這個符文本框，很好用的~

『伍』 你好，我用webuploader.html5only.min.js實現批量圖片上傳，我該怎麼在action中獲取上傳的那些文件呢

1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容

├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。

├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本

├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本

├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本

├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本

2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。

// SWF文件，當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf

// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js

// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js

// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js

// 去除圖片處理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js

2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)

2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴，npm install。
3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。

2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本

// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}

3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>

3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
image：圖片
video：音視頻
flash：flash
file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)

因為配置uploader時需要事先准備好dom元素，angular打開模態框是非同步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有載入完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置

.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};

}])

3.3.2 指令web-uploader

.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){

$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);

『陸』 怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片

1、實現頭的方法代碼。

注意事項：

JavaScript是一種網路腳本語言，在web應用開發中得到了廣泛的應用，它經常被用來為網頁添加各種動態功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現自己的功能。

『柒』 HTML裡面怎麼插圖片

代碼是「<img scr = '圖片地址'>」。

1、新建html文件，在body標簽中添加img標簽，img標簽在html中沒有結束標簽，所以不需要添加「</img>」代碼。給img標簽添加屬性「src」，屬性值填自己想要添加圖片的地址，這里以同一目錄下的1.png為例，這樣圖片就添加好了:

『捌』 實現下面代碼的上傳圖片並瀏覽的功能，html+js實現，求指教，在線等。。。

單純的 JS 不能實現文件上傳，僅能做預覽（而且還要看瀏覽器的隱私設置是否允許）。

代碼：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</title>
</head>
<body>
<scripttype="text/javascript">
functionshowImage()
{
//獲取文件路徑
varpath=document.getElementById('upload').value;
//顯示文件路徑
document.getElementById('imgName').innerHTML=path;
//創建img
varimg=document.createElement('img');
//載入圖像
img.src=path;
//插入圖像到頁面中
document.getElementById('imgPrev').appendChild(img);
}
</script>
<tableborder="1"style="width:1000px">
<trclass="midTable1td1"style="height:50px;">
<tdalign="center">圖片描述</td>
<tdalign="center">圖片</td>
<tdalign="center">操作</td>
</tr>
<trclass="midTable1td2"style="height:200px">			
<tdid="imgName"class="inputContent"align="center">顯示圖片名</td>
<tdid="imgPrev"align="center">顯示圖片</td>
<tdalign="center"><inputtype="button"name="Submit2"value="刪除"class="button"></td>
</tr>
</table>
<form>
<inputtype="file"id="upload"onChange="showImage()"/>
</form>
</body>
</html>

『玖』 如何用javascript在HTML中插入圖片。急！！在線等

<div id="myimage"></div>
<input type="button" value="插入圖片" id="btninsertpic" onclick="insertpic()" />
<script type="text/javascript">
function insertpic(){
path="表.png";//請修改為本地圖片的路徑
document.getElementById('myimage').innerHTML='<img src="'+path+'" />';
}
</script>

『拾』 我想實現 html +js 上傳圖片 並保存到本地tmp目錄下，現有代碼如下，求指導。必採納

你js代碼把文件以base64編碼形式展示了出來，是為了讓用戶上傳文件之前能夠預覽對吧。

文件的IO操作需要用後端來實現，如果你只是做web前端開發的話，就沒有必要研究這個東西，如果你是後端開發者的話可以嘗試一下，相關的資料很多，我寫個示例吧，後端用php為例：

html實現：

<!DOCTYPEhtml>
<html>
<head>
	<metacharset="utf-8">
	<title>ss</title>
</head>
<body>
<formaction="file.php"method="post"enctype="multipart/form-data">
	<inputtype="file"name="upfile">
	<inputtype="submit"value="提交">
</form>
</body>
</html>

php實現（file.php）：

<?php
@header('Content-Type:text/html;charset=utf-8');
if(!isset($_FILES['upfile'])){
	exit('請選擇您要上傳的文件！');
}

if(!file_exists($_FILES['upfile']['tmp_name'])){
	exit('您要上傳的文件不存在！');
}

$file_dir=dirname(__FILE__).'/tmp';
if(!is_file($file_dir)){
	@mkdir($file_dir,0777,true);
}

$file_ext='.jpg';
if(preg_match('/(.w+)$/',$_FILES['upfile']['name'],$ext_tmp)){
	$file_ext=$ext_tmp[1];
}

$file_save_path=$file_dir.'/'.uniqid().mt_rand(101,999).$file_ext;

@rename($_FILES['upfile']['tmp_name'],$file_save_path);

if(!file_exists($file_save_path)){
	exit('文件上傳失敗！');
}

exit('文件上傳成功！');