html上传图片
1. html 表单上传图片
使用表单中的文件域（<input type="file".../>）控件可以上传文件。
打开DreamWeaver，这里使用的版本是CS6，新建一个php文件。
保存到网站目录下，命名为upload.php。
在代码中插入一个表单
对话框中，操作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。
结果如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下
代码中，重要的是名为imgfile的文件域控件，type属性为“file”，表示这是一个文件域控件。
accept属性表示点击“浏览...”按钮时，弹出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性，有些浏览器并不支持。比如在IE9中，此属性不起任何作用。在chrome中，此属性起作用。
如果想支持所有的图像文件，accept值可以设置为“image/*”，在chrome中，文件类型显示
好了，html代码就写完了，因为action=""，表示点击上传按钮时，将表单提交给自身，因此，我们还要添加接收表单的处理代码。
代码如下：
<?php
if (isset($_FILES['imgfile'])
&& is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile'];
$imgFileName = $imgFile['name'];
$imgType = $imgFile['type'];
$imgSize = $imgFile['size'];
$imgTmpFile = $imgFile['tmp_name'];
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);
$validType = false;
$upRes = $imgFile['error'];
if ($upRes == 0)
{
if ($imgType == 'image/jpeg'
|| $imgType == 'image/png'
|| $imgType == 'image/gif')
{
$validType = true;
}
if ($validType)
{
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
);
echo $strPrompt;
}
}
}
?>
代码分析：
$_FILES是一个数组变量，用于保存上传后的文件信息。
$_FILES['imgfile']表示文件域名称为'imgfile'的控件提交服务器后，上传的文件的信息。
一个上传的文件，有以下属性信息：
'name'： 上传的文件在客户端的名称。
'type'： 文件的 MIME 类型，例如"image/jpeg"。
'size'： 已上传文件的大小，单位为字节。
'tmp_name'：上传时，在服务器端，会把上传的文件保存到一个临时文件夹中，可以通过此属性得到临时文件名。
'error'：文件在上传过程中的错误代码。如果上传成功，此值为0，其它值的意义如下：
1：超过了php.ini中设置的上传文件大小。
2：超过了MAX_FILE_SIZE选项指定的文件大小。
3：文件只有部分被上传。
4：文件未被上传。
5：上传文件大小为0。
代码中首先判断$_FILES['imgfile']变量是否存在，如果存在，并且$_FILES['imgfile']['tmp_name']变量所指文件被上传了，判断error属性，如果属性为0，把上传后的图像从临时文件夹移到upfile文件夹中，显示上传文件的信息，并显示上传后的图像。
如果error值不为0，表示上传失败，显示失败信息。
完成的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传图片文件</title>
</head>
<?php
if (isset($_FILES['imgfile'])
&& is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile'];
$upErr = $imgFile['error'];
if ($upErr == 0)
{
$imgType = $imgFile['type']; //文件类型。
/* 判断文件类型，这个例子里仅支持jpg和gif类型的图片文件。*/
if ($imgType == 'image/jpeg'
|| $imgType == 'image/gif')
{
$imgFileName = $imgFile['name'];
$imgSize = $imgFile['size'];
$imgTmpFile = $imgFile['tmp_name'];
/* 将文件从临时文件夹移到上传文件夹中。*/
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);
/*显示上传后的文件的信息。*/
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
);
echo $strPrompt;
}
else
{
echo "请选择jpg或gif文件，不支持其它类型的文件。";
}
}
else
{
echo "文件上传失败。<br>";
switch ($upErr)
{
case 1:
echo "超过了php.ini中设置的上传文件大小。";
break;
case 2:
echo "超过了MAX_FILE_SIZE选项指定的文件大小。";
break;
case 3:
echo "文件只有部分被上传。";
break;
case 4:
echo "文件未被上传。";
break;
case 5:
echo "上传文件大小为0";
break;
}
}
}
else
{
/*显示表单。*/
?>
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
<?php
}
?>
</html>
2. extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能
首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要弹出窗口，这个窗口负责实现上传功能，实现上传后，要将上传的图片路径添加到HTMLEditor的光标处，并且要以<IMG></IMG>的方式，这样HTMLEditor才能解析出来。实现代码如下：
前台JSP页面
fieldLabel : '商品特性',
id : 'shopSp.spTxms',
name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'
这其中引用了StarHtmleditor，StarHtmleditor.js的代码如下，直接将代码复制下来，然后新建个JS，全复制进去就行了。
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
anchor : '90%'
}],
buttons : [{
text : '上传',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法，但只能传一个图片
//更新后的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg);
}
});
}
}, {
text : '关闭',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的，不用var不知道为什么总是报错，另外JS一定要与JSP的编码方式一致，要不然报莫名其妙的错误，而且错误都没有显示。
后台java代码
/****
* HTMLEditor增加上传图片功能：
* 1、上传图片后，需要将图片的位置及图片的名称返回给前台HTMLEditor
* 2、前台HTMLEditor根据返回的值将图片显示出来
* 3、进行统一保存
* @param 上传图片功能
* @return JSON结果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}
特别要注意的是路径问题，路径问题主要有2点需要注意：
1、前台页面引用StarHtmleditor.js的路径一定要正确；
2、Htmleditor上传的图片路径一定要改，因为上传之后图片路径变为http://localhost:8080/，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：
//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));
这样基本就完成了这个HTMLEditor上传图片功能。
如图：
3. 如何通过html上传照片
<html>
<head>
<title></title>
</head>
<body>
<imgsrc="images/logo.png"width="220"height="50"/>
</body>
</html>
4. htmleditor 如何上传图片
最近用Extjs做项目，用到htmleditor控件，唯一的缺陷是不可以上传图片，为了以后方便，在基于htmleditor控件上写了一个支持上传图片的。
控件StarHtmleditor
/**
* 重载EXTJS-HTML编辑器
*
* @class HTMLEditor
* @extends Ext.form.HtmlEditor
* @author wuliangbo
*/
HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
name : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
height : 25,
anchor : '90%'
}],
buttons : [{
text : '上传',
type : 'submit',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传',
url : 'Default.aspx',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
win.hide();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告',
action.result.errors.msg);
}
});
}
}, {
text : '关闭',
type : 'submit',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
页面js代码
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var ff = new Ext.FormPanel({
title : "文件上传",
renderTo : document.body,
width : 600,
height : 480,
labelWidth : 55,
frame : true,
items : [{
xtype : "textfield",
name : "title",
fieldLabel : "标题",
anchor : "98%"
}, {
xtype : "combo",
name : "topic_id",
fieldLabel : "所属栏目",
anchor : "98%"
}, {
xtype : "textfield",
name : "keywords",
fieldLabel : "关键字",
anchor : "98%"
}, {
xtype : "StarHtmleditor",
name : "content",
fieldLabel : "内容",
anchor : "98%"
}]
});
});
后台代码简单实现了一下
protected void Page_Load(object sender, EventArgs e)
{
string fileName = string.Empty;
string fileURL = string.Empty;
string rt = string.Empty;
try
{
HttpPostedFile file = Request.Files[0];
fileName = GetFileName(file.FileName);
file.SaveAs(Server.MapPath("upload//") + fileName);
fileURL = "upload/" + fileName;
rt = "{success:'true',fileURL:'" + fileURL + "'}";
}
catch
{
rt = "{success:'false',fileURL:'" + fileURL + "'}";
}
Response.Write(rt);
}
private string GetFileName(string FullName)
{
string fileName = string.Empty;
int last = FullName.LastIndexOf(@"/");
fileName = FullName.Substring(last + 1, FullName.Length - last - 1);
return fileName;
}
实现效果如下
http://blog.csdn.net/zhaozhen1984/article/details/5911839
原文链接请查看谢谢。
http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html
详查链接。谢谢。
5. Html上传图片路径问题
不是你 首先你穿图片要是相对路径 绝对不可以出现盘符 如c:\\ 或者d:\\ 之类的 还有 file:\\ 也不行正确的相对路径 就是 ..\img\1.jpg 前面应该有2个"." 如果网页文件与图片在同一级目录 就不需要"."了 直接1.jpg 就ok [ice为您解答 网页设计交流群:80090731] 希望你能参与我们之中 人不多 但都热爱dw 热爱网页制作
6. html图片怎么上传
和网页传送方式一样 比如你的html文件放在桌面，你的图片新建文件夹img 之后做完之后看一下路径是否正确，有的是需要你修改路径的，桌面添加默认为fttp：c\....等路径 把前面的删除 只留有文件夹以及文件名
7. 怎么在网页中插入图片html图片代码
代码如下:
1、<img src="divcss5-logo-201305.gif" width="165" height="60" />
img介绍：
src 后跟的是图片路径地址
width 设置图片宽度
height 设置图片高度
2、我们在html源代码中分别插入三张图片，一张原始大、一张将宽度高度改小小、一张将宽度高度改大。
(7)html上传图片扩展阅读:
在HTML中出现图片通常有2种：
1、某元素的背景图像【绝大多数元素都可以通过background属性设置其背景图像】
直接在html中的标签里设置：
<p style=”background-image:url(xxx.jpg)“>设置一个段落的背景图像</p>
在CSS上设置html中的 ”<p>一个段落</p>“ 的背景图像：
p{ background-image:url(xxx.jpg); }
2、图像元素img：
<img src="xxx.jpg" alt="这是一个图像元素">
8. html怎么上传本机图片
如果只是做上传页面 只需要把HTML和图片放在同一个文件夹里面就可以了，
如果是要做上传功能，则需要建立一个服务器。
9. html上传图片，这个对吗没效果js文件的问题吗
你的133行有问题，既然是写的引用外部Js，就不能在下面又写页内Js，你还是分成二个script标签吧，一个引用JQ，。一个写内部脚本，，
哎，服了，你是个人才。
10. 在html里面怎么为一个按钮添加图片
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。