类似于kaixin001图片上传的思路

file文件域可以读取图片的路径通过路径便可将图片显示在网页上
这需要用JS操作

不要什么控件也行吧，图片上传到存哪个路径，是知道的（要不怎么存），再根据这个路径显示图片eee
z2Z

JS获取表单的更改事件，然后取得图片的本地路径，赋值给IMG标签.

up下！请问
js如何获得图片的本地路径？

http://hi.baidu.com/linjk03/blog/item/5adebccb3f4a361abe09e643.html

开心网,ie可以显示,但ff是不可以的.

正解其实很简单直接把input的值丢给IMG就可以了

楼主把下面代码存成testUpload.php就可以明白了
然后把http://img.kaixin001.com.cn/i/uploading.gif下载到同级目录。
目前只ie有效，以前没事编的ff下我这里上传不了，当时没继续查，有项目了
<?php
function getFileName( $f)
{
$arFileinfo = pathinfo ( $f );
return date("YmdHis").randNumber(6).( isset( $arFileinfo["extension"] ) ? ".".$arFileinfo["extension"] : "" );
}function randNumber( $len )
{
$sRes = "";
while( strlen( $sRes ) < $len )
{
$sRes .= rand()%10;
}
return $sRes;
}if ( $_SERVER["REQUEST_METHOD"] == "POST" )
{
echo $_POST["uid"];
if  ( ((int)$_POST["uid"]) > 0 )
{
$uid = (int)$_POST["uid"];
if( $_FILES[ "a".$uid ] )
{
if( move_uploaded_file( $_FILES[ "a".$uid ]["tmp_name"], "./uploads/".getFileName( $_FILES[ "a".$uid ]["name"] ) ) )
{
echo <<< scriptTag
<script language='javascript'>
parent.finishOne( 1 );
</script>
scriptTag;
}
else
{
echo <<< scriptTag
<script language='javascript'>
parent.finishOne( 0 );
</script>
scriptTag;
}
}
}
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TITLE</title>
<style type='text/css'>
*
{
font-size:12px;
}
input
{
padding:3px;
}
.input_memo
{
border:1px solid #ffffff;
background-color:#ffffff;
color: #707070;
padding:4px 3px 3px 3px;
text-align:center;
}
</style>
<script language='javascript'>
function $( id )
{
return document.getElementById( id );
}
var mid = 0;
var m_bUploading = false;
var m_imgPrompt = new Array(0);
var m_aUpFileID = new Array(0);
var m_nTotal;
var m_nCurrent;
function addone()
{
var objTab = $("copy");
var sHtml = objTab.innerHTML;
mid++;
sHtml = sHtml.replace( /{%id%}/g, mid.toString() ); if ( mid == 1 )
{
$("area").innerHTML = sHtml;
}
else
{
var objs = $("area").getElementsByTagName( "DIV" );
if ( objs.length > 0 )
{
objs[objs.length-1].innerHTML = sHtml;
}
}
}
function init( numcount )
{
for( var i=0;i<numcount;i++ )
{
addone();
}
}function showcount()
{
alert( mid );
}function addimage( id, filebrowser )
{
var sHtml = "";
sHtml += "    <div style='width: 110px; height:86px; overflow:hidden;'>";
sHtml += "        <div style='position:relative; float:left; width: 110px; height:86px;'>";
sHtml += "            <div style='position:absolute; width:108px; height:84px; right:0px; bottom:0px; background-color:#DFDFDF;'></div>";
sHtml += "            <div style='position:absolute; width:106px; height:82px; top:0px; left:0px; ";
sHtml += " background-color:#FFFFFF; border:1px solid #C8C8C8;'>";
sHtml += "                <div style='position:absolute;width:100px; height:75px; top:3px; left:3px; ";
sHtml += " filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' ";
sHtml += " id='upimg_" + id + "'>";
sHtml += "                    <div id='uploadbar_" + id + "' style='position:absolute; bottom:0px; height:8px; width:100%; ";
sHtml += "                     background-color:red; background-image:url(uploading.gif); display:none;'></div>";
sHtml += "                </div>";
sHtml += "            </div>";
sHtml += "        </div>";
sHtml += "   </div>";
sHtml += "   <div style='margin-top:3px; text-align:center; color:#808080;'><span style='border:1px solid #808080; ";
sHtml += " width:102px; padding:0px; margin:0px; display:table;'>";
sHtml += "       <input type='text' style='width:94px;' class='input_memo' ";
sHtml += " id='img_cut_" + id + "' name='img_cut_" + id + "' value='请输入照片标题'></span>";
sHtml += "    </div>";
sHtml += ""; if ( $( "DIV_IMG_" + id ) != null )
{
$( "DIV_IMG_" + id ).innerHTML = sHtml;
$( "DIV_IMG_" + id ).style.visibility = 'visible';
}
else
{
var oDiv = document.createElement("DIV");
if ( oDiv.style.styleFloat != undefined )
{
oDiv.style.styleFloat = 'left';
}
else if ( oDiv.style.cssFloat != undefined )
{
oDiv.style.cssFloat = 'left';
}
oDiv.style.width = '110px';
oDiv.style.height = '118px';
oDiv.style.marginRight = '28px';
oDiv.style.marginBottom = '15px';
oDiv.style.overflow = 'hidden';
oDiv.id = "DIV_IMG_" + id;
$("photopreview").appendChild( oDiv );
oDiv.innerHTML = sHtml;
} if ( $( "upimg_" + id ).filters )
{
$( "upimg_" + id ).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $( "file_" + id ).value;
$( "upimg_" + id ).style.width = "100px";
$( "upimg_" + id ).style.height = "75px";
}

$( "txt_" + id ).value = $( "file_" + id ).value;
$( "file_" + id ).style.display = 'none';
$( "fileex_" + id ).style.display = 'block'; m_imgPrompt[ id ] = 0;
promptTitle( id ); m_aUpFileID[ m_aUpFileID.length ] = id;
m_aUpFileID.sort( myCompare );
}function promptTitle( id )
{
if ( $( "img_cut_" + id ) != null )
{
if ( m_imgPrompt[ id ] % 2 == 0 )
{
$( "img_cut_" + id ).style.backgroundColor = '#ffcc66';
}
else
{
$( "img_cut_" + id ).style.backgroundColor = '#ffffff';
}
m_imgPrompt[ id ]++;

if ( m_imgPrompt[ id ] < 6 )
{
setTimeout( "promptTitle(" + id + ")", 500 );
}
else
{
$( "img_cut_" + id ).value = getFileName( $( "file_" + id ).value );
}
}
}function getFileName( sAddress )
{
if ( typeof( sAddress ) == "string" )
{
sAddress = sAddress.replace( /\\/g, "/" );
if ( sAddress.indexOf( "/" ) == -1 )
{
return sAddress.split(".")[0];
}
else
{
var ar = sAddress.split( "/" );
return ar[ ar.length-1 ].split(".")[0];
}
}
}function deleteFile( id )
{
$( "file_" + id ).style.display = 'block';
$( "fileex_" + id ).style.display = 'none';

if ( $( "area" ).getElementsByTagName( "TABLE" )[id-1].getElementsByTagName( "TR" )[0].getElementsByTagName( "TD" )[1] )
{
var td = $( "area" ).getElementsByTagName( "TABLE" )[id-1].getElementsByTagName( "TR" )[0].getElementsByTagName( "TD" )[1];
var file = td.childNodes[0]; var oFile = document.createElement("INPUT");
oFile.type = 'file';
oFile.name = "a" + id;
oFile.id = "file_" + id;
oFile.style.width = '260px';
oFile.onchange = function()
{
addimage( id, oFile );
}
td.replaceChild( oFile, file );
$( "DIV_IMG_" + id ).style.visibility = 'hidden'; kickID( id );
}
}function kickID( id )
{
var aTemp = new Array(0);
var i;
for ( i=0;i<m_aUpFileID.length;i++ )
{
aTemp[i] = m_aUpFileID[i];
} m_aUpFileID = new Array(0);
for ( i=0;i<aTemp.length;i++ )
{
if ( aTemp[ i ] != id )
{
m_aUpFileID[ m_aUpFileID.length ] = aTemp[i];
}
}
m_aUpFileID.sort( myCompare );
}function myCompare(x, y)
{
if (x < y)
return -1;
else if (x === y)
return 0;
else
return 1;
}function onFileUpload()
{
var i;
for ( i=0;i<m_aUpFileID.length;i++ )
{
if ( $( "DIV_IMG_" + m_aUpFileID[ i ] ) != null )
{
var objs = $( "DIV_IMG_" + m_aUpFileID[ i ] ).getElementsByTagName( "SPAN" );
if ( objs.length == 1 )
{
var div = objs[0].parentNode;
if ( div.tagName == "DIV" )
{
div.innerHTML = "等待上传中...";
}
}
}
} m_nTotal = m_aUpFileID.length;
m_nCurrent = 1; doUpload();
}function doUpload()
{
if ( m_bUploading )
{
alert( "文件上传任务正在继续...." );
return;
} if (!( m_nTotal > 0 && m_nCurrent <= m_nTotal ))
{
return;
} m_bUploading = true;
if ( $( "form" + m_aUpFileID[m_nCurrent-1] ) )
{
var objs = $( "DIV_IMG_" + m_aUpFileID[ m_nCurrent-1 ] ).getElementsByTagName( "DIV" );
if ( objs.length > 0 )
{
objs[objs.length-1].innerHTML = "图片上传中...";

$( "uploadbar_" + m_aUpFileID[ m_nCurrent-1 ] ).style.display = 'block';
$( "form" + m_aUpFileID[m_nCurrent-1] ).target = 'hidden_area';
$( "form" + m_aUpFileID[m_nCurrent-1] ).submit();
}
}
}function finishOne( nRes )
{
$( "uploadbar_" + m_aUpFileID[ m_nCurrent-1 ] ).style.display = 'none';

var objs = $( "DIV_IMG_" + m_aUpFileID[ m_nCurrent-1 ] ).getElementsByTagName( "DIV" );
if ( objs.length > 0 )
{
if ( nRes == 1 )
{
objs[objs.length-1].innerHTML = "完成上传！";
}
else
{
objs[objs.length-1].innerHTML = "上传失败！";
}
} m_nCurrent ++;
if ( m_nCurrent <= m_nTotal )
{
doUpload();
}
else
{
m_bUploading = false;
alert( "全部文件上传完成！" );
}
}
</script>
</head>

接上<body onload='init(5);'>
<div id='copy' style='display:none; '>
<table border='0' cellpadding='1' cellspacing='0' id='tab{%id%}' style='margin-bottom:5px;'>
<form id="form{%id%}" name="form{%id%}" action="testUpload.php" method="post" enctype="multipart/form-data">
<tr>
<td style='padding-top:5px;'>照片{%id%}：</td>
<td><input type='file' name='a{%id%}' id='file_{%id%}' style='width:260px;' onchange='addimage({%id%}, this);'><div id='fileex_{%id%}' style='display:none; '><div style='float:left;'><input type='text' name='txt_{%id%}' id='txt_{%id%}' style='width:185px;'></div><div id='delete_{%id%}' style='float:left; font-size:12px; padding-left:3px; margin-top:6px;'><a href='#' onclick='deleteFile( {%id%} ); return false;' style='color:blue; text-decoration:none; font-size:arial; font-weight:bold;'>×</a></div></div></td>
</tr>
<input type='hidden' name='b{%id%}' id='b{%id%}' value=''>
<input type='hidden' name='uid' id='uid' value='{%id%}'>
</form>
</table>
<div></div>
</div>
<input type='button' value='插入新的' onclick='addone();'>
<input type='button' value='查看几个' onclick='showcount();'>
<div id='area' style='margin-top:20px; float:left; width:310px;'></div>
<div id='photopreview' style='margin-top:20px; width:420px; float:left; margin-left:30px; '></div>
<div id='sp' style=' width:1px; height:1px; font-size:1px; clear:both;'></div>
<input type='submit' value='上传全部照片' onclick='onFileUpload();'>
<br /><br /><iframe frameborder='0' width='100' height='100' name='hidden_area' src='#' style='border:1px solid red;'></iframe>
</body>
</html>

调试易

类似于kaixin001图片上传的思路

解决方案 »