html 表单上传图片_随笔

使用表单中的文件域（<input type="file".../>）控件可以上传文件。

打开DreamWeaver，这里使用的版本是CS6，新建一个php文件。

保存到网站目录下，命名为upload.php。

在代码中插入一个表单

对话框中， *** 作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：

<body>

</body>

接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。

结果如下：

<body>

<label>选择图片文件</label>

</form>

</body>

不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下

代码中，重要的是名为imgfile的文件域控件，type属性为“file”，表示这是一个文件域控件。

accept属性表示点击“浏览...”按钮时，d出的打开对话框中的文件类型。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">

<head>

<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>

<label>选择图片文件</label>

</form>

</body>

<?php

}

</html>

最近用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

详查链接。谢谢。

可以给文件上传控件再添加一个onclick事件啊，当点击这个input时，把myimg的src赋值给cusInput，然后当onchange事件发生再把上传后的图片地址赋值给cusInput，这样的话即使因为图片路径相同未触发onchange事件，但onclick事件仍然发生了啊，cusInput仍然保留了上一次上传的图片路径：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6176848.html

html 表单上传图片

发表评论

评论列表（0条）